aspect-ratio
aspect ratio, aspect-ratio: 16 / 9, padding hackDefinition
The CSS property that gives a box a preferred width-to-height ratio — aspect-ratio: 16 / 9 — so that when one dimension is set the other follows, which is what an image placeholder, a video frame or a square avatar needs and what the padding-bottom percentage hack used to fake
One of the first properties in the modern-CSS list because the old workaround was so bad: a zero-height box with padding-bottom: 56.25% and an absolutely positioned child. Now a card image is aspect-ratio: 3 / 2; object-fit: cover and reserves its space before the image loads, which is the layout-shift fix. Baseline since 2021. The resource cards here use a fixed size-16; a 2:3 book jacket is the case for the property.
Reserve the shape, then fill it. The property says what the box will be before the content says how big it is, which is the difference between a page that settles and one that jumps.