Aspect Ratio

Use the utility first

Tailwind v4 ships aspect-video, aspect-square and arbitrary aspect-[4/3]. For anything you can type out, those are the right answer: no component, no wrapper element, no import.

<div className="aspect-video rounded-md bg-muted" />

This component exists for the one case a class cannot express: a ratio that comes from data.

<AspectRatio ratio={format.width / format.height}>…</AspectRatio>

<hlm-aspect-ratio [ratio]="format.width / format.height">…</hlm-aspect-ratio>

That is why it sets an inline aspect-ratio style rather than a class, and why that is not a token-discipline violation: an aspect ratio is layout geometry from a prop, not a colour or a scale step.

It does not clip

There is no overflow-hidden. Content that exceeds the box stays visible rather than being cut off — the better default, because clipped content can be unreachable. Two consequences:

• If you want a crop (an image thumbnail), add overflow-hidden yourself.
• A fixed ratio with text inside can be overflowed by a user who raises text size to 200% (WCAG 1.4.4). Give such a box a min-h-* floor, or keep text out of it. [a11y]

Rules

• The box is w-full and takes its height from the ratio — so its width has to come from the parent. Inside a grid or flex column that is automatic; free-floating, give it a width.
• Angular’s directive forces display: block. An inline box ignores aspect-ratio entirely, so don’t override it to inline.
• Nothing focusable, no role, nothing to announce. It is a layout primitive.

Never

• AspectRatio for a ratio you could have written as a class.
• A fixed ratio around text that grows.