Aspect Ratio

Reserve a stable frame for caller-owned media.

Preview

Installation

Install

npx shadcn@latest add https://ghost-ui.com/r/aspect-ratio.json

Basic usage

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

<AspectRatio ratio={16 / 9}>
<img src="/research-slide.png" alt="Research slide" />
</AspectRatio>

Structures

AspectRatio renders one div. Its child content and accessible name remain caller-owned.

Examples

Widescreen

Reserve a 16:9 slide preview.

Square

Use a square crop for equal gallery tiles.

Standard

Use a 4:3 document preview.

Portrait

Reserve a portrait document region.

Contain

Keep the full media visible inside the reserved ratio.

Missing Media

Keep a stable region when a preview is unavailable.

Preview unavailable

API reference

AspectRatio properties
Prop	Type	Default	Description
`ratio`	`number`	`16 / 9`	Positive finite width-to-height ratio. Invalid, zero, or negative values use 16 / 9.
`fit`	`"cover" \| "contain"`	`"cover"`	Sets object-fit on direct children.
`ref / native props / className / style`	`React div props`		Forwarded to the frame. Inline style is merged after the computed aspect ratio.