Aspect Ratio
Aspect Ratio
A Radix AspectRatio.Root — constrains its content to a fixed width/height ratio (an image, a video embed, a map) regardless of the content's own natural size.
import { AspectRatio } from "@pompeitech/vesuvius-ui";Default
16:9
An image
The most common case — a ratio that reserves the right amount of space before the image has even loaded, so nothing shifts around it:
API
AspectRatio
| Prop | Type | Default | Description |
|---|---|---|---|
ratio | number | 1 (square) | Width divided by height — 16 / 9, 4 / 3, 1 for a square, 9 / 16 for a portrait/story format. |
Plus every native <div> prop on the root, and Radix's underlying AspectRatio.Root behavior: it sizes itself via a padding-bottom percentage trick internally, so its single child should be an element that can stretch to fill it (className="size-full object-cover" on an <img>, as above).