Components
AspectRatio
Constrains children to a specific width-to-height ratio.
Overview
AspectRatio maintains a consistent width-to-height ratio for its children. Useful for images, videos, and maps.
16:9
4:3
1:1
Usage
export function Example() {
return (
<AspectRatio ratio={16 / 9}>
<img src="/hero.jpg" alt="Hero" className="object-cover w-full h-full" />
</AspectRatio>
);
}Common Ratios
<AspectRatio ratio={1}>1:1 Square</AspectRatio>
<AspectRatio ratio={16 / 9}>16:9 Widescreen</AspectRatio>
<AspectRatio ratio={4 / 3}>4:3 Classic</AspectRatio>
<AspectRatio ratio={21 / 9}>21:9 Ultra-wide</AspectRatio>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
ratio | number | 1 | Width / height ratio |
children | ReactNode | — | Content to constrain |