Defining image ratio for lazyloading

The CMS Questions
1

I’m implementing lazyloading with responsive images in a css-grid (lostgrid) and i would like to have the image-wrapper shown at the width and height of the image and with a background-color even before the image gets loaded.

My first idea was to use ->ratio() to get the image-ratio and then use that information to set a height for my image-wrapper which works so far quite well.

My only problem is that some images, seem to have slightly different ratio. For exemple 1.4723 and 1.501. It isn’t dramatic but im looking of a better way to handle that problem.

Should i use ->crop() to make sure images are cropped at a precise ratio ?

thanks fo any suggestions.

2

What you can do:

 $ratio = ($image->height() / $image-width() * 100);

In the case of a 16/9 image, you will get 56.25, that you can use as padding-bottom (with %) in the wrapper, for example:

<figure>
    <div class="image-wrapper" style="padding-bottom: <?php echo $ratio ?>% ">
        <img>
    </div>
</figure>

That way, you can set the absolute in the wrapper :slight_smile:. The <figure> (or any other containing div) is needed to correctly size the padding-bottom of the image-wrapper.

2 Likes
3

That’s what I’m doing for now. The only difference is how i use the ratio.

I think I’ll stick with it. The problem with slightly different image sizes and ratios should be handled separately from the output anyway.

Thanks