The aspect-ratio property
Reserve the shape, not just the size.
Before aspect-ratio, holding a box at 16:9 meant the padding-top percentage hack. One property now states the ratio directly β and the box keeps it as it flexes.
What aspect-ratio does
aspect-ratio sets the preferred width-to-height ratio of a box. Give one dimension (often width: 100%) and the browser computes the other to honour the ratio. aspect-ratio: 16 / 9 reads as "9 units tall for every 16 wide"; aspect-ratio: 1 (the same as 1 / 1) is a perfect square.
Why it replaced the padding hack
The old trick was padding-top: 56.25% on a wrapper plus an absolutely-positioned child β opaque, and the magic number broke if the ratio changed. aspect-ratio states intent in one line, works on the element itself, and needs no extra wrapper or positioning.
Pairing with object-fit
A ratio box and its content can disagree. When you drop an image into a fixed-ratio box, set width: 100%; height: 100%; object-fit: cover so the image fills the frame and crops the overflow instead of stretching. object-fit: contain letterboxes instead of cropping.
When the ratio yields
aspect-ratio is a preference, not a hard clamp. If content forces the box taller (and min-height isn't auto-overridden), the box grows and the ratio is dropped. For media boxes that hold a single replaced element this rarely bites; for text containers, expect the ratio to give way when content overflows.
Try it 4 examples
A 16:9 video frame
HTML+CSS+JSintroThe .player div takes its width from the 480px-capped figure and derives its height from aspect-ratio: 16 / 9, so the play button sits centred in a wide 16:9 frame with no padding hack or fixed pixel height. Resize the frame and the box keeps the same shape because only one dimension is pinned.