Aspect Ratio
A container that maintains a fixed width-to-height ratio, ideal for images, videos, and media embeds.
Preview
16:9 Ratio
Hostel hero image (16:9)
1:1 Square
Profile photo (1:1)
Usage
tsx
import { AspectRatio } from "zostel-ui";
{/* 16:9 video */}
<AspectRatio ratio={16 / 9}>
<img src="/hero.jpg" alt="Hero" className="object-cover w-full h-full" />
</AspectRatio>
{/* 1:1 square */}
<AspectRatio ratio={1}>
<img src="/avatar.jpg" alt="Avatar" className="object-cover w-full h-full" />
</AspectRatio>
{/* 4:3 photo */}
<AspectRatio ratio={4 / 3}>
<img src="/photo.jpg" alt="Photo" className="object-cover w-full h-full" />
</AspectRatio>Props
| Prop | Type | Default | Description |
|---|---|---|---|
ratio | number | 1 | The desired width-to-height ratio (e.g., 16/9, 4/3, 1) |
className | string | — | Additional CSS classes |
children | ReactNode | — | Content to render inside the aspect ratio container |
ratioType:
numberDefault: 1
The desired width-to-height ratio (e.g., 16/9, 4/3, 1)
classNameType:
stringDefault: —
Additional CSS classes
childrenType:
ReactNodeDefault: —
Content to render inside the aspect ratio container