Aspect Ratio

AspectRatio constrains media — an image, video, embed, or map — to a fixed width:height ratio that scales with its container, so the box reserves its space before the content loads and never reflows. Give it a ratio (16/9, 1, 4/3) and drop the media inside. It's a layout primitive for ratio-locked media; for free-flowing content use normal sizing, and to clip a too-tall element use overflow instead.

Use it to prevent layout shift on media. Wrapping an image/video in a locked ratio reserves the slot up front, so the page doesn't jump when it loads — the main reason to reach for it. Pick the ratio that matches the asset's native shape to avoid letterboxing.

Let the media fill, and crop deliberately. Have the child cover the box (object-fit) so it fills without distortion, and accept that covering crops — frame the asset so the important part survives. Don't stretch content to a ratio it wasn't made for.

Keep accessibility on the media, not the wrapper. The ratio box is purely presentational; put alt text on the image and captions/labels on the video. Reserve it for genuinely ratio-bound content rather than as a generic spacer.