← Back to release summary

CSS aspect-ratio property

Category
CSS
Type
Chromium catches up
Status
Enabled by default (Chrome 88)
Intent stage
Prepare to ship

Summary

Normally, only certain replaced elements have an aspect ratio, particularly images. For them, if only one of width and height is specified, the other can be computed from it using the intrinsic aspect ratio. This property allows explicitly specifying an aspect ratio for any other element to get similar behavior.

Motivation

Generalizes the aspect ratio concept to general elements. This allows various effects, for example sizing <iframe> elements using an aspect ratio, things like filmstrips where each element has the same height but needs an appropriate width, cases where a replaced element is wrapped by a component but should keep the aspect ratio, etc.

Standards & signals

Samples: https://codepen.io/una/pen/BazyaOM

Explainers: https://docs.google.com/document/d/1VqD0mfkIDyCxQBrrvDw5wEbhXBsmEYIhk6ahiX_fvco/edit

View on chromestatus.com