Mpdf: 'background-position: center' & 'background-size: cover' stretching image

[Esc4pism]

i copied this issue from mpdf.github.io (i dont know what the difference between these 2 githubs is? but i posted it there first)

the css attributes 'background-position: center' & 'background-size: cover' on an element with a background-image only work, as long as the background image gets cropped vertically, but if it would get cropped horizontally, the image will instead be stretched and repeated.

this is how it looks like & should look like in Html, and how its rendered in the pdf

Does anyone know a workaround for this? the elements with the background-image also have width & height = 100% and im assuming it could have something to do with those percent sizes, but i need them to be 100%.

[Klap-in]

Could you please provide the html and php code of your test case?

[Esc4pism]

this is the html code i generate, before passing it to mpdf with WriteHTML($html), i also do a str_replace("\r\n",'',$html); on the string because i had some problems with linebreaks in texteditor areas (using ckeditor) but this doesnt affect the code below.

<div class="pdfElement snappable dropped" style="background-color: white; width: 158px; height: 105px; position: absolute; right: auto; bottom: auto; left: 61.3438px; top: 410px;">
    <div class="view">
        <div class="mm-minimal-image" style="background-image: url('someurl.jpg'); width: 100%; height: 100%; background-size: cover; background-position: center center; ">
        </div>            
    </div>
</div>

<div class="pdfElement snappable dropped" style="background-color: white; width: 232px; height: 68px; position: absolute; right: auto; bottom: auto; left: 291.344px; top: 427px;">
    <div class="view">
        <div class="mm-minimal-image" style="background-image: url('someurl.jpg'); width: 100%; height: 100%; background-size: cover; background-position: center center; ">
        </div>            
    </div>
</div>

<div class="pdfElement snappable dropped" style="background-color: white; width: 79px; height: 229px; position: absolute; right: auto; bottom: auto; left: 582.344px; top: 355px;">
    <div class="view">
        <div class="mm-minimal-image" style="background-image: url('someurl.jpg'); width: 100%; height: 100%; background-size: cover; background-position: center center; ">
        </div>
    </div>
</div>

i have also set a ton of configs for mpdf like auto margins, page margins ect to 0, because i define those already in a page/layout editor ui im currently designing.

[scm6079]

I'm running into this problem as well, and have a very simple test case that demonstrates it:

This works:

<div style="position:absolute;width:5.5in;height:5.5in;top:0;left:0;background: url(http://via.placeholder.com/200x800.jpg) center center no-repeat; background-size: cover">
</div>

While this does not:

<div style="position:absolute;width:5.5in;height:5.5in;top:0;left:0;background: url(http://via.placeholder.com/800x200.jpg) center center no-repeat; background-size: cover">
</div>

The only difference in the examples is that the image that works is 200x800 (height constrained) vs 800x200 (width constrained).

Here's the entirety of the PHP code necessary to reproduce the error:

$mpdf = new Mpdf();
$mpdf->WriteHTML('<div style="position:absolute;width:5.5in;height:5.5in;top:0;left:0;background: url(http://via.placeholder.com/800x200.jpg) center center no-repeat; background-size: cover"></div>');
$mpdf->Output(null, Destination::DOWNLOAD);

The only PARTIAL workaround I am aware of is to specify the mPDF proprietary CSS "background-image-resize" property which CONTAINS not COVERS the desired area (not the same).
e.g.

<div style="position:absolute;width:5.5in;height:5.5in;top:0;left:0;background: url(http://via.placeholder.com/800x200.jpg) center center no-repeat; background-image-resize: 6">
</div>

I would expect that to be the default behavior for the background-size: cover css style.

[scm6079]

Digging into this I found an error in the MPDF code that computes the background size for cover, which ignores viewport aspect ratio and makes invalid assumptions about which dimension will always contain first. I've fixed the code and will create a pull request to resolve.