Aspect Ratio

A box that keeps a width-to-height ratio, filled by its content.

16:9 at any width.

When to use

Use when: Images, video, maps, or embeds that must keep their shape as the layout resizes.
Avoid when: The content has its own intrinsic size, such as an img with width and height set.

Installation

bunx shelf add aspect-ratio

The source lands in src/components/ui/aspect-ratio.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import { AspectRatio } from "@/components/ui/aspect-ratio";

<AspectRatio />

Built on

Packages: @stylexjs/stylex
Shelf items: utils
Figma: In progress. See Designers and Figma.