Aspect ratio
A wrapper that locks its child to a fixed width-to-height ratio, so media holds its shape and reserves the space before it loads (no layout shift). The Figma set covers 17 ratios (16:9, 4:3, 3:2, 1:1, 21:9, the golden 1.618:1, and their portraits); pass whichever you need as a division.
Anatomy
- 1AspectRatio
The single wrapper. Give it ratio (width ÷ height) and put overflow-hidden + rounded-* on it — the box owns the corners and the crop.
- 2Child (img / video)
The asset inside. It fills the box with h-full w-full object-cover so it crops instead of stretching. A logo uses object-contain with padding instead.
Variants
One prop, many shapes. Landscape (16/9, 4/3, 3/2), square (1/1), ultrawide (21/9), and portrait (3/4, 9/16) all come from the same ratio prop. Below, a curated set — the Figma has all 17.
<AspectRatio ratio={16 / 9} className="overflow-hidden rounded-md border border-border">
<img src="…" alt="…" className="h-full w-full object-cover" />
</AspectRatio>Recipes
Ready-to-copy compositions covering the most common Yuno usages of this atom.
The everyday case: a 16/9 box holding an <img> with object-cover, rounded-md with a border. Use it for checkout previews, report screenshots, or any media tile in a grid — the box is reserved before the image loads, so nothing jumps.
<div className="w-72">
<AspectRatio ratio={16 / 9} className="overflow-hidden rounded-md border border-border">
<img
src="/preview.png"
alt="Checkout preview"
className="h-full w-full object-cover"
/>
</AspectRatio>
</div>A square 1/1 tile for a provider logo. Here the image uses object-contain with padding (not cover) so the logo is never cropped, on a bg-card surface. Logos from the Yuno CDN.
<div className="w-40">
<AspectRatio ratio={1} className="overflow-hidden rounded-md border border-border bg-card">
{/* Provider logo from the Yuno CDN — object-contain, not cover */}
<img
src="https://icons.prod.y.uno/adyen_logosimbolo.png"
alt="Adyen"
className="h-full w-full object-contain p-8"
/>
</AspectRatio>
</div>An ultrawide 21/9 (or 2/1) box for a hero or promo banner. Same object-cover fill, rounded-lg for the larger surface.
<AspectRatio ratio={21 / 9} className="overflow-hidden rounded-lg border border-border">
<img src="/banner.png" alt="Promo" className="h-full w-full object-cover" />
</AspectRatio>Import
Copy this import line at the top of the file where you compose this atom.
import { AspectRatio } from "@/components/ui/aspect-ratio";Props
Everything else from the underlying HTML or Radix primitive is forwarded via ...props.
| Prop | Type | Default | Description |
|---|---|---|---|
| ratio | number | 1 | Width ÷ height. Pass a division so intent is obvious: 16 / 9 (video), 4 / 3 (screenshot), 1 / 1 (square), 21 / 9 (banner). 16 / 9 is landscape; 9 / 16 is portrait. |
| className | string | — | Merged onto the ratio box. Put overflow-hidden + rounded-* here (and a border or bg) — the box, not the image, owns the corners. |
| children | ReactNode | — | The asset. An <img>/<video> should carry h-full w-full object-cover to fill and crop; a logo uses object-contain with padding. |
When to use
- Media thumbnails and previews in a grid, so the row height is stable.
- Any image or video that must hold its shape and not deform.
- Reserving the media box before the asset loads, to avoid layout shift.
When not to use
- Cards or panels with variable content height — those size to their content.
- A single fixed-size icon or avatar — set width/height directly (or use Avatar).
- Laying out non-visual content — the wrapper is for one visual asset.
Usage
- Pass ratio as a division (16 / 9, 4 / 3, 1 / 1) so the intent is legible.
- Give the child h-full w-full object-cover to fill and crop (object-contain for logos).
- Put overflow-hidden and the rounded-* / border on the AspectRatio, not the image.
- Don't wrap layout containers — the wrapper is for a single visual asset.
- Don't flip the ratio — 16 / 9 is landscape, 9 / 16 is portrait.
- Don't skip object-cover — without it the image stretches and deforms.
Related
Cross-links to atoms and patterns you may reach for next.