Aspect Ratio
A container that maintains a specific aspect ratio for its content.
aspect-ratio-demo.app
16:9
Installation
terminal.sh
npx y2kui@latest add aspect-ratioUsage
import { AspectRatio } from "@/components/ui/aspect-ratio"
<AspectRatio ratio={16 / 9}>
<img src="..." alt="..." />
</AspectRatio>Props
| Prop | Type | Default | Description |
|---|---|---|---|
ratio | number | 1 | Desired width/height ratio. |
className | string | — | Additional Tailwind classes. |
children | ReactNode | — | Content to constrain. |