Setting image height with padding-bottom

Question

I was watching this tutorial (~12:00) in which the developers were explaining how to fix image loading problems on slow internet connections.

The way they fixed it was with an low resolution image which would act like a placeholder until the full resolution image was found. They made a CSS class in which they defined image width & height.

I understood why they've set width: 100%, but for image height they used padding-bottom: 150% (they used the image aspect ration for this calculation). In the video they didn't have a logical explanation so if anyone knows the answer why this works please explain it. Thank you.

Answer 1

This is known as the padding-bottom hack, when loading images and videos: your browser will usually not set a height to the element as it needs to first load the content in order to allocate the correct height.

However if you know the aspect ratio of the element in advance you can easily calculate and apply a padding-bottom:

Padding Bottom = (Image Height / Image Width) * 100%

For example, a 16:9 picture would give us (9 / 16) * 100% = 56.25%, thus: applying a padding-bottom: 56.25%; rule to the image's container will allocate the right vertical space preventing content reflow when the image gets loaded.

Smashing Magazine published a thorough explanation of this hack.