CSS Aspect Ratio — natively.

tl;dr

With a single line of CSS, you can create native aspect ratio boxes that will keep their aspect ratio when resized (think iframes that can be set to fluid widths but must have a fixed height).

.container {
  aspect-ratio: 16 / 9;
}

CSS Aspect Ratios — natively.

My most popular post demonstrates how to create responsive iframes by implementing a CSS hack with intrinsic ratios. It was first published back in 2014 and since has become the most widely used solution to creating containers that keep their aspect ratio.

While the CSS hack continues to work great, there’s an even better, native way to create aspect ratio boxes with the release of Chromium 88 and Firefox 85.

Say good-bye to CSS hacks.

Introducing the aspect-ratio property. In short, this property allows you to define a preferred aspect ratio on elements. Check out the example below:

The aspect-ratio-box container will have an aspect ratio of 19:9. Since the width is set to 75vw, the resulting height will be 75vw / 16 * 9 = 42.19vw.

Allowed Values

The default value for the aspect-ratio property is auto. This indicates that the box has no preferred aspect ratio and should size itself as it normally would. Other values for the CSS aspect ratio property can include:

• It typically consists of two numbers separated by a /. The first parameter targets the width and the second one the height.
• It’s also allowed to pass in just a single number. In that case, the second number will be considered to be 1. E.g. a <ratio> of 2 will translate to 2 / 1.
• Passing in a 0 for either of the numbers is not allowed.
• The spaces around the / are not required, so 2/1 is also a valid <ratio> value.

CSS Aspect Ratio Browser Support

Unfortunately, there’s not enough browser support for the aspect-ratio property to rely on it in production websites. Chrome Canary and Firefox (nightly build) are the only browsers that currently support it, but it’s coming and quick. You can track the status to stay up-to-date on the CSS aspect ratio property below:

• Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1045668
• Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1528375
• Webkit (Safari): https://bugs.webkit.org/show_bug.cgi?id=47738

But that doesn’t mean you can’t start using it. Luckily, there’s a fallback for browsers that don’t support aspect-ratio that allows you to start using the property right away.

aspect-ratio Browser Fallback

Thanks to the powerful @supports CSS query, it’s possible to add a fallback for browsers that don’t support aspect-ratio. The example below shows how to use the old intrinsic ratio technique as a fallback for CSS aspect ratios.

/** Fallback (current, using intrinsic ratio technique) */
@supports not (aspect-ratio: 16 / 9) { 
  .aspect-ratio-box::before {
    float: left; 
    padding-top: 56.25%; 
    content: '';
  }
  .aspect-ratio-box:after {
    display: block;
    content: '';
    clear: both;
  }
}

In Conclusion

After 6 years of wanting and waiting for a feature like this to land and become native, it’s here and works incredibly well. Though it’s still a Working Draft right now, creating CSS aspect ratio boxes can be done right now with the intrinsic ratio fallback.