Aspect Ratio

Media in proportion, without fixing the size of the layout around it.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add aspect-ratio

What add aspect-ratio installs alongside the component. The CLI skips any you already have in a compatible version.

3 examples · 1 component

A 16:9 cover that fills its column and crops with object-cover.

Inbox

Drafts

Sent

ratio defaults to 1; each tile keeps its shape at any column width.

Sleeps four · 2 h from the city

A 4:3 cover at the top of a Card; the card sets the width.

Forwards props and ref to the container element; it only adds composition utilities.

Prop	Type	Default
`ratio` Width divided by height, e.g. 16 / 9. The width comes from the parent; the height follows.	`number`	`1`
`AspectRatio` Children are pinned to fill the box; give images object-cover or object-contain. Add overflow-hidden with rounded-* to clip the corners.	`div`	—

Purely presentational: the box adds no role or name, so the media inside keeps its own (alt text on images, a title on iframes, captions on video).

The height is reserved before the media loads, so the page does not jump while people read.

Server-safe: a single div with the CSS aspect-ratio property.