CSS aspect-ratio for the win

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 the CSS 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

Two images with different sizes can share the same aspect ratio, in this case 3:4 - Image Photo by Chris Lee on Unsplash

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 be width:height or x:y.

You can find these values everywhere:

• The most common values for photography are 4:3 and 3:2.
• Instagram Square pics use a 1:1, portraits are 4:5 and landscapes 1.91:1
• OG Images for social media are 1.91:1
• Youtube videos and thumbnails enjoy a widescreen of 16:9
• If you are reading this from a 15'' MacBook Pro your retina display is about 16:10

Same image with different aspect ratios, 2:3 on the left and 1:1 on the right- Image Photo by Tim Schmidbauer on Unsplash

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 preventing cumulative 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's width, so if you had an element that is 640px and you set a padding-top: 100% wouldn't that be equal to 640px?

A perfect square of 1:1 aspect ratio. 🤯

Want a youtube video aspect ratio 16:9? Just use The Rule of three:

9 * 100 / 16 and your padding-top should be 56.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 drop aspect-ratio on your selector alone and it will calculate a height based on the auto 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!