The CSS aspect-ratio property

The property states a preferred ratio between a box's width and its height. Given one definite dimension, the browser derives the other, so a container with a width of one hundred percent and a ratio of sixteen over nine gets a height without any calculation in your stylesheet and without the padding trick that used to be required.

It is a preference rather than a command. If both the width and the height resolve to definite values, those win and the ratio is ignored, which surprises people who set a height elsewhere in a component and then wonder why the ratio does nothing. Minimum and maximum constraints also override it, so a ratio box inside a flex container with a min-height will not always be the shape you asked for.

For replaced elements such as an image or a video the value auto is not a no-op: it means use the intrinsic ratio of the media. Combining auto with an explicit ratio, written as auto and then the fraction, means use the intrinsic ratio if the media has one and fall back to the stated ratio if it does not, which is the safest declaration for a slot that might receive anything.

The layout shift argument is the strongest reason to use it. Width and height attributes on an image already give the browser an intrinsic ratio to reserve space with, and the CSS property covers everything else: an embedded player, a canvas, a placeholder that will be filled by script. Reserving the box before the content arrives is what stops the page jumping.