16 / 9
16 / 9
1 / 1 (square)
auto 1 / 1 (natural)
no ratio (natural 2:1)
Each box is 130px wide with an auto height taken from its aspect-ratio.
The ratio-derived height is definite, so a percentage-height child
resolves against it — the blue bar is height: 60% of the aspect-ratio: 2 box:
An absolutely-positioned box (height: 64px; aspect-ratio: 3 / 1) takes its width
(192px) from the height. A normal-flow block instead fills its container — stretch-fit wins over the ratio.
A 2:1 image at width: 130px: a bare <ratio> overrides its natural
ratio, auto <ratio> keeps the natural one, and no value uses the natural 2:1.
Inside an auto-height parent, height: 50% is indefinite, so the ratio sizes the
height (200px wide, aspect-ratio: 4 / 1 → 50px tall) instead of collapsing to auto.