# Aspect Ratio Scaling

Hey there

I have a question regarding scaling some divs with its content. Some pretty basic stuff but I tried so many times without success so I thought I’d ask you.

How can I scale it proportionally that the projects stay in the same relation to each other (aspect ratio)? Like in this example:

https://mathiasmanner.ch/

In that example his projects scale but the “stack” on top of each other. So the height gets smaller but the proportions of the image stay the same. Didn’t quite get to do that here, sorry for that basic question.

Thanks very much in advance though!

Severin

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