Aspect Ratio Scaling

Hey @Severin_Weber this isn’t a basic question as some might think. Aspect-ratio in CSS is still under development. But we can fake it in some ways.

The way I like to force an aspect-ratio is by using a particular case about vertical padding on elements without a height. You’ll understand a little better after the example bellow.

If you have an element like a div and this div has height: 100px, if you give it a padding-top: 50%, it will have 50px padding. But If your div has no height, the 50% padding-top you gave it would instead come from the width of the element.

In that case, the div’s height would be 50% of it’s width, an aspect-ratio of 2/1.

You can force the ratio the same way for any proportion you want.

if you want 16x9 just do the math 9 / 16 * 100 = 56.25%
4x3 is: 3 / 4 * 100 = 75%
Square is: 1 / 1 * 100 = 100%

I hope that was not confusing. Let me know if you have any doubts.

1 Like