Aspect Ratio
Constrain content ratio.
Usage
Pass ratio as width divided by height — 16 / 9, not 1.777. Write the division and the
intent stays readable. Media inside is stretched to fill the box with object-fit: cover.
16 / 9
Common ratios
Square for avatars and thumbnails, 4:3 for photos, 16:9 for video.
1 / 1
4 / 3
16 / 9
Why it matters
The box is reserved before the media loads. Without that, the browser has no height to allocate, so everything below jumps down the moment the image arrives — the layout shift users feel as the page fighting them. Reserving the space is not a styling nicety, it is how you stop that.
It is purely presentational and adds no ARIA of its own, so the content keeps its own
semantics — an <img> inside still needs its alt.
Props
Plus every native <div> attribute via prop spreading.
| Prop | Type | Default |
|---|---|---|
ratio Width divided by height — `16 / 9`, `1`, `4 / 3`. Reserving the box up front is what stops the layout shifting when the media loads. | number | 1 |
class Extra classes merged onto the root. | string | — |