AspectRatio

Constrains its child content to a given width-to-height ratio. Useful for images, videos, and embedded media that need consistent proportions.

16:9 Widescreen

16:9

<AspectRatio ratio={16 / 9}>
  <div className="flex h-full w-full items-center justify-center rounded-lg bg-muted">
    <span className="text-muted-foreground">16:9</span>
  </div>
</AspectRatio>

1:1 Square

1:1

<AspectRatio ratio={1}>
  <div className="flex h-full w-full items-center justify-center rounded-lg bg-muted">
    <span className="text-muted-foreground">1:1</span>
  </div>
</AspectRatio>

API Reference

Prop	Type	Default	Description
`ratio`	`number`	`1`	The width-to-height ratio. For example, 16/9 for widescreen or 1 for a square.