Skip to content

Aspect Ratio

Constrains its content to a fixed width-to-height ratio so media, embeds, and placeholders keep their shape at any container size.

Aspect Ratio
A snow-capped peak above a red autumn forest

Installation

pnpm dlx shadcn@latest add @sortui/aspect-ratio

Usage

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

Examples

4:3

A snow-capped peak above a red autumn forest

3:2

A snow-capped peak above a red autumn forest

16:9

A snow-capped peak above a red autumn forest

21:9

A snow-capped peak above a red autumn forest

2:3

A snow-capped peak above a red autumn forest

3:4

A snow-capped peak above a red autumn forest

9:16

A snow-capped peak above a red autumn forest

Ship your next project this week

Get the full Figma kit, the code of 180+ sections and every future update for one payment.

Get Pro Access