Streaming live at 10am (PST)

How to keep aspect ratio on div that is set to 100% width?

If I want a div to be the full width of the parent element, I set the div to 100% width and it will always fill the entire width, no matter what screen resolution. Easy.

But, what if I want to keep the aspect ratio of the div, the height always being the same as the width, no matter what the screen resolution is? How can you do this in Webflow?

Hey Christoffer. Check this link out:

https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

1 Like

Thanks! :smiley: Setting the top padding in the div to the percentage according to the wanted aspect ratio did the trick! Super simple!

1 Like

I’m glad to help!

Happy Designs

1 Like

…And the width should be set with percentage too, otherwise percentage padding-top doesn’t work. Which means necessity of enclosing div to control the actual size… Omg, CSS’s so unnecessarily complicated isn’t it?