Chrome 88 Ships `aspect-ratio`

Chrome 88, released yesterday, has landed support for the CSS aspect-ratio property. The timing is notable: Safari Technology Preview 118, which came out on January 6, announced the same feature, hinting at broader cross-browser adoption as the property rolls out to Edge, Firefox, and others.

For the uninitiated, an aspect ratio describes the proportional relationship between an element's width and height. A 1/1 ratio yields a perfect square; 3/1 produces a wide rectangle; and 16/9 is the familiar video standard. Replaced elements like images and iframes already carry an intrinsic aspect ratio, so setting one dimension automatically maintains the other. Non-replaced elements (e.g., divs) have no such intrinsic behavior, and developers have traditionally worked around that with percentage padding tricks.

The new property changes that equation. With aspect-ratio in CSS, a non-replaced element can maintain its proportions without the HTML structure or layout hacks that the padding hack demanded.

How It Behaves

A few usage details matter in practice:

  • If you declare a width on an element with aspect-ratio, the browser calculates the height from that ratio. Declaring height instead flips the calculation to derive the width.
  • If you set both width and height explicitly, the aspect-ratio property is ignored entirely.

There is a release video that demonstrates the support directly at the relevant segment, along with the full Chrome 88 changelog.

Reference Material

Those looking to dig deeper can consult the official spec, the MDN docs, or the roundup of articles already published on the topic:

Now that Chrome is on board, this is a good moment to get familiar with the property.

Direct Link →