Aspect Ratio
Maintains a consistent width-to-height ratio for content.
Installation
npm i @radix-ui/react-aspect-ratioUsage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Image from "next/image"
import { AspectRatio } from "@/components/ui/aspect-ratio"
export function AspectRatioDemo() {
return (
<div className="w-[450px]">
<AspectRatio ratio={16 / 9}>
<Image
src="/images/bg-1.jpg"
alt="Image"
className="rounded-md object-cover"
fill
/>
</AspectRatio>
</div>
)
}Props
| Component | Props | Description |
|---|---|---|
| AspectRatio | AspectRatioPrimitive.AspectRatioProps ratio?: number | The component that maintains a consistent width-to-height ratio. Default ratio is 1/1. |
Examples
Different Ratios
4:3 Ratio
4:3
Square (1:1) Ratio
1:1