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


Here is my site Read-Only: [LINK]https://preview.webflow.com/preview/severinweber1?utm_medium=preview_link&utm_source=designer&utm_content=severinweber1&preview=6c1df8e867c11823c4912dae237284c4&mode=preview[1]
(how to share your site Read-Only link)

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

Hey @gilson thanks for your answer and your efforts!

I kinda get the idea of your structure, but I tried once again many different things and none of it worked. Do you have a practical and concrete solution for this site? I mean it should be easy. Making a container / div with 100% then the slider with width 75% and then it should scale with the desktop’s size but it doesn’t really work sadly.

Here are a few examples of @gilson’s technique:

http://css-square.webflow.io/

1 Like

This is absolutely amazing, didn’t know about this, thanks for asking the question and thanks for the answer!