aspect-ratio: height that follows width

Useful to know

aspect-ratio sets a preferred width-to-height ratio. With width: 100%; aspect-ratio: 16 / 9; block and automatic height, the browser can calculate the height from the available width. If the width is 320 pixels, the corresponding height is 180 pixels. This is an arithmetic example. [1]

The property is convenient for video frames, galleries, and pre-booked space. It describes the geometry of the box, but does not determine by itself whether the image inside will be cut or stretched. Appropriate content rules are also needed for this.

When you specify both specific width and height, ratio does not override these dimensions. If the item looks incorrect, first check that the height is actually auto, as well as whether other constraints are not involved in the calculation. [1]