Aspect Ratio

Displays content within a desired ratio.

Basic Usage

16:9 (Video)

16:9

4:3 (Photo)

4:3

1:1 (Square)

1:1

21:9 (Ultrawide)

21:9

Aspect RatioMaintain consistent aspect ratios

pnpm add @corew500/ui

import { AspectRatio } from "@mordecai-design-system/ui"

<AspectRatio ratio={16 / 9}>
  <img src="..." alt="..." className="object-cover" />
</AspectRatio>

<AspectRatio ratio={16 / 9}>
  <iframe src="https://youtube.com/embed/..." />
</AspectRatio>

<AspectRatio ratio={4 / 3}>
  <img src="..." alt="..." className="object-cover" />
</AspectRatio>

<AspectRatio ratio={1}>
  <img src="..." alt="..." className="rounded-full object-cover" />
</AspectRatio>

<AspectRatio ratio={21 / 9}>
  <img src="..." alt="..." className="object-cover" />
</AspectRatio>

Prop	Type	Default	Description
`ratio*`	number	—	—