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.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.
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:
<div class="image-wrapper" style="padding-bottom: <?php echo $ratio ?>% ">
That way, you can set the absolute in the wrapper . The
<figure> (or any other containing div) is needed to correctly size the padding-bottom of the
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.