AspectRatio
Maintains width-to-height ratio via Radix UI
Usage
tsx
import { AspectRatio } from '@tryvienna/ui'
<div className="w-96 overflow-hidden rounded-lg border">
<AspectRatio ratio={16 / 9}>
<div className="flex size-full items-center justify-center bg-muted text-muted-foreground text-sm">
16:9
</div>
</AspectRatio>
</div>Examples
Widescreen
tsx
<div className="w-96 overflow-hidden rounded-lg border">
<AspectRatio ratio={16 / 9}>
<div className="flex size-full items-center justify-center bg-muted text-muted-foreground text-sm">
16:9
</div>
</AspectRatio>
</div>Square
tsx
<div className="w-48 overflow-hidden rounded-lg border">
<AspectRatio ratio={1}>
<div className="flex size-full items-center justify-center bg-muted text-muted-foreground text-sm">
1:1
</div>
</AspectRatio>
</div>Classic
tsx
<div className="w-80 overflow-hidden rounded-lg border">
<AspectRatio ratio={4 / 3}>
<div className="flex size-full items-center justify-center bg-muted text-muted-foreground text-sm">
4:3
</div>
</AspectRatio>
</div>API Reference
AspectRatio
Also accepts all props from AspectRatioPrimitive.Root.
Data Attributes
| Component | data-slot |
|---|---|
AspectRatio | "aspect-ratio" |