How to correctly use parent-fit?

[c9mb]

I'm have a problem understanding the use of parent-fit

I'm basically doing this:

< script src="lazysizes.min.js">< /script> < script src="ls.object-fit.min.js">< /script> < script src="ls.parent-fit.min.js">< /script>

< div style="max-width:1170px"> < div style="width:100%;"> < div style="width:40%;"> < figure> < img class="lazyload" src= "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-sizes="auto" data-srcset="/xsversion.jpg 240w,/smversion.jpg 480w,/mdversion.jpg 768w,/lgversion.jpg 992w,/xlversion.jpg 1200w,/fsversion.jpg 1920w" data-aspectratio="0.611" style="object-fit:contain;" alt="my photo"> < /figure> < /div> < div style="width:60%;"> < p>just a bunch of text < /p> < /div> < /div> < /div>

data-aspectratio is the native aspect-ratio of the source image, calculated on the server at run-time, and is accurate.

However, when checking the image requested from the server, it is either larger than necessary (wasting bandwidth) or smaller than required (causing blurriness) but almost never the expected selection.

Am I doing something basically wrong by trying to use parent-fit this way, or just not configuring it properly?

[aFarkas]

I really need a working example including CSS of this. Please create one by using jsfiddle, jsbin or whatever.

[c9mb]

Thanks for the quick response. I initially just wanted to know if the basic html implementation above, is correct, and should be expected to work. I'm assuming that I'm doing something wrong, but it is unclear to me if I have understood the required html config for this usage pattern, and have it correct in the example above. It is also unclear to me what lazysizes requires from the dom/css environment to be able to work out the closest matching image in the set to request from the server, and so I may not be providing what it needs. The image is in a fluid (bootstrap) grid and there is a wrapping div that has the correct %age width, but has a height of auto, because it's unknown, so I'm providing the data-aspectratio of the image.

[aFarkas]

The image is in a fluid (bootstrap) grid and there is a wrapping div that has the correct %age width, but has a height of auto, because it's unknown, so I'm providing the data-aspectratio of the image.

If the backend can calculate the aspectratio and write in into a data-aspectratioattribute the backend is also able to write it into a inline style property:

<div class="ratio-box" style="padding-bottom: 61.1%;">
<!-- no need for data-aspectratio="0.611"  -->
    <img

        data-sizes="auto"
        data-srcset="http://placehold.it/175x75 175w,
        http://placehold.it/350x150 350w,
        http://placehold.it/700x300 700w,
        http://placehold.it/1400x600 1400w"
        data-src="http://placehold.it/700x300"
        class="lazyload" />
</div>

But to say wether you do something wrong I would see an example. Otherwise please close.