AspectRatio
React aspect ratio container that locks children to a ratio such as 16/9, so images, maps, and embeds do not shift layout while loading.
AspectRatio locks its child to a fixed ratio, so layouts do not shift while media loads. Pass ratio like "16/9" and set the width; the height follows.
When to use
Use AspectRatio around images, videos, maps, and iframes so the space is reserved before the media loads. Pass ratio and set the width; the height follows.
Use asChild to apply the ratio directly to an image element.
Examples
Props
Props declared by AspectRatio. Native attributes of the underlying element pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
ratio | string | number | Width-to-height ratio, fed to the native CSS aspect-ratio property.
Prefer the readable string form (ratio="16/9") - it stays legible in the
rendered DOM and is a true CSS <ratio>. The numeric form (ratio={16 / 9})
also works but JavaScript evaluates it to a float (1.777…), so the
original intent is lost in dev tools. Default 1 (square). | |
asChild | boolean | Render the ratio onto the single child element (e.g. an <img> / <video>)
via Radix Slot, instead of wrapping it in a <div>. Avoids an extra
wrapper around media. |
Accessibility
AspectRatio adds no semantics of its own. The media inside needs its own alt text or title.
Reserving space avoids layout shifts that disorient users with low vision or motion sensitivity.
%22%2F%3E%3C%2Fsvg%3E)