Layout Aspect Ratio

Aspect Ratio

Keeps a picture in shape at any width (Radix Aspect Ratio).

Preview

16:9 — a cover

1:1 — a profile picture

Usage

tsx

import { AspectRatio } from "zostel-ui";

<AspectRatio ratio={16 / 9} className="rounded-xl overflow-hidden bg-muted">
  <img src="/brand/scenes/waters.svg" alt="" className="h-full w-full object-cover" />
</AspectRatio>

Props

Prop	Type	Default	Description
`ratio`	`number`	`1`	Width ÷ height.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

ratio

Type: number

Default: 1

Width ÷ height.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).