Prevent layout shift on image load with css

Question

I'm using padding-bottom hack to prevent content jump around when my images load, but it doesn't work with smaller images. Here's the code that works fine for images that take up the whole 60% of my container width:

View:

 decimal aspectRatio = Block.Image.Height / (decimal)Block.Image.Width;
 decimal paddingPercent = aspectRatio * 60;

 <div style="padding-bottom:@paddingPercent.ToString().Replace(',', '.')%;
     <img src="@imageUrl" />
 </div>

Styles:

 .img-wrapper {
        position: relative;
        background-color: #f1f4f6;
        margin: 0 auto;
        max-width: 60%;
                
        img {
            position: absolute;
            right: 0;
            left: 0;
            margin: auto;
        }
    }

But if I use image like 48x48, my aspectRatio is going to be 1, and the paddingPercent will be 60%, so i'm having this problem (see the last image - flag):

i'd appreciate any advice!

Answer 1

To keep using the responsive approach, you could add a condition to your code for images smaller than some set amount of pixels (for example, let's say 100px in this example)

decimal aspectRatio = Block.Image.Height / (decimal)Block.Image.Width;
decimal padding = aspectRatio;
string actualPadding = '';
if((decimal)Block.Image.Width > 100)
    actualPadding = (padding * 60) + '%';
else
    actualPadding = Block.Image.Height + 'px';

An alternative to using padding for it would be to just add the width and height attributes to your image tag. This will make the images take up the same amount of space before and after loading..

<img src="" width="@Block.Image.Height" height="Block.Image.Width" />

This approach assumes that the width and height of the images on your web page are same as their original width/heights.