Usage
import { AspectRatio } from "@voila.dev/ui/aspect-ratio";<AspectRatio ratio={16 / 9}>
<img src={cover} alt="" className="size-full rounded-lg object-cover" />
</AspectRatio>Reach for it when a box has to keep its shape while its width is decided by something else — a card cover in a responsive grid, a video embed, an image placeholder that must not shift the page as it loads. The width comes from the parent, so the ratio has something to work against; inside a box that already has both dimensions there is nothing for it to do.
If all you need is the grey box while data loads, that is Skeleton.
Recipes
Numbers and CSS strings both work
ratio takes a number, which is why 16 / 9 is written as the division rather
than as 1.778, and it also takes any string CSS aspect-ratio accepts — so
"3/4" is available without doing the arithmetic.
The child is not stretched for you. It has to fill the box itself: size-full
with object-cover on an image, size-full on a wrapper.
API
| Prop | Type | Default | |
|---|---|---|---|
ratio | string | number | 1 | The width-to-height ratio to hold, as a number (16 / 9) or as any string
CSS aspect-ratio accepts ("3/4"). |
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <div> prop. Source: aspect-ratio/components/aspect-ratio.tsx.