Keep image container height even if image is loading or fails to load

programming
css
Keep image container height even if image is loading or fails to load

Keeping image container height without bothering about whether an image is loading or failed to load is pretty simple.

Here are the steps to do so

  1. Make two image container elements.
  2. Set width on the first image container.
  3. Make a second image container relative positioned.
  4. Make the image absolute positioned(the image will be inside the second container).
  5. Create the height of the second image container using top padding.

HTML markup

<div id="image-container">
    <div id="image-container-inner">
        <img src="path of image" alt="Alt text">
    </div>
</div>

Now we will complete the above mentioned steps and style the HTML markup.

Styling

Step 1 - Making two image containers

As you can see in the above HTML markup, we have created two container elements for the image.

Step 2 - Setting width of first image container.

#image-container{
    width: 500px;
}

Step 3 - relative positioned second image container

#image-container-inner{
    position: relative;
}

Step 4 - absoluted positioned image

#image-container-inner img{
    position: absolute;
}

The image will be placed at the top-left corner of the container and will cover its whole width, so the complete styling for this step will be

#image-container-inner img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

Step 5 - the last step: creating height of the second image container using top padding

To create height for the second image container we will use padding-top css property.

Value of padding-top will be in "%", so now the question is how much top padding should be applied?

Here is the solution,

if image width:height ratio is 2:1 then padding-top will be 50%

if the ratio is 3:1 then 33.3333%

and if the ratio is 4:1 then 25% and so on, you got the math.

So if for our image width:height ratio is 2:1, then the additional styling for second image container will be

#image-container-inner{
    padding-top: 50%;
}

But what if the image doesn't have width:height ratio from above mentioned ratios.

In that case, just set the padding-top value for second image container to some random value then open up browser developer tools, inspect the second image container element and increase or decrease the padding-top value till the image container height becomes equal to the image height.

When image container height becomes equal to the image height then that is your magic number, the padding-top value that you have to use in your styling for second image container.

Complete code

HTML markup

<div id="image-container">
    <div id="image-container-inner">
        <img src="path of image" alt="Alt text">
    </div>
</div>

Styling

#image-container{
    width: 500px;
}

#image-container-inner{
    position: relative;
    padding-top: 50%; /* 50% is for 2:1 width:height ratio, change it according to your image width:height value */
}

#image-container-inner img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

Live demo

Thank you for reading :) please share this article with others.