Wkhtmltopdf: css property 'object-fit: center' not being applied in pdf.

[prasadsurase]

I have a html page consisting of multiple divs. Each div(555px * 400px) has to display an image(smaller or larger than the div) fitting perfectly inside the div while maintaining its aspect ratio. The image has to scale up/down to fit inside the div. I am using the following css for each img tag and it works perfectly.

.object-fit {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

When i try to convert the html to pdf using wkhtmltopdf(0.12.2.1 (with patched qt)), the 'object-fit: contain' property is not being applied which results in the image stretching to cover the entire div. The messes up the image aspect ratio. This is the link to the repository for the issue.

[JamoCA]

Try using the solution from here:
https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3

The end result is the same and it works well with browsers that don't render object-fit yet. Basically it sets a non-repeating, centered background image. I would consider hard-coding it specifically for WKHTMLTOPDF so you don't have to consider including Modernizer or jQuery:

width: 100%;
height: 100%;
background-image: url(/large_or_small_photo.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;

[prasadsurase]

@JamoCA Thanks for the solution. I fixed the issue since long back since it was a deal breaker. This ticket can be closed.

[JamoCA]

Why close it? Does object-fit:cover; work in the latest 0.12.3 series? How did you fix it? Did it require additional CSS code, command line parameters or something?

[Kukunin]

I'd reopen the ticket because it doesn't work still.