Update 😎: If you like to see this tutorial in video format, here is the link!.

So a few days ago a colleague of mine published in the slack from my company that a new CSS property was defined in theCSS Box Sizing Module Level 4 specification. Is still a Working Draft, so some things could change but are supported already by Chrome and Firefox under an experimental flag.

Yeah, I'm talking about my dream come true,aspect-ratio is in progress and is gaining a lot of momentum.

To understand why is this such a big deal, let's cover first what aspect-ratio means in terms of design and what CSS hacks were used until now.

Aspect ratio

Is a common term used in photography and video where the dimensions of any media resource are expressed as two integers and a colon, it can bewidth:height orx:y.

You can find these values everywhere:

• The most common values for photography are4:3 and3:2.
• Instagram Square pics use a1:1, portraits are4:5 and landscapes1.91:1
• OG Images for social media are1.91:1
• Youtube videos and thumbnails enjoy a widescreen of16:9
• If you are reading this from a 15''MacBook Pro your retina display is about16:10

Well, why this should concern you as a Frontend dev? Should, a lot actually.

Several times you will find the situation where a media resource needs to be represented through UI Elements, a perfect example would be a card with a Youtube video, or a grid showing your latest articles on your webpage.

If we lived in a world where all devices had the same screen (what a crappy world), then we could easily set width and height to a fixed value. But we leave in a responsive world, maintaining aspect ratio has been increasingly important for web developers, especially as image dimensions differ from element sizes depending on the available space.

Creating intrinsic placeholder containers for images, videos, and embeds and preventingcumulative layout shift in fluid environments is a must.

So.... how it's was done before?

The old-good-hack: using padding-top

This hack is written in every experienced frontend dev's handbook, even when is a little bit unintuitive, it actually works and is a well-accepted cross-browser friendly solution.

padding-top is based on the parent element'swidth, so if you had an element that is640px and you set apadding-top: 100% wouldn't that be equal to640px?

A perfect square of 1:1 aspect ratio. 🤯

Want a youtube video aspect ratio16:9? Just useThe Rule of three:

9 * 100 / 16 and yourpadding-top should be56.25%

Here is an example of using this hack (in comparison to not using it)

CSS aspect-ratio for the win

It's time for magic.

.my-thumbnail{aspect-ratio:16/9;}

Just dropaspect-ratio on your selector alone and it will calculate a height based on theauto width.

BAM!! No more hacks needed.

I create more examples in this Pen:

Can I use?

Of course, the hype is real until you enter this page and you check that you cannot use it yet in most browsers, only supported in Chromium, Safari Technology Preview, and Firefox Nightly for now.

I hope you learned a lot as I did, let me know your thoughts in the comments.

Happy coding!