components
/components/ui/aspect-ratio.tsx /components/ui/aspect-ratio.tsx
Aspect Ratio
Displays content with a desired ratio
Installation
Usage
Imports
import { AspectRatio } from "@/components/ui/aspect-ratio"Code
<AspectRatio ratio={16 / 9}>
<Image src="/media/background-2.png" alt="Example" fill />
</AspectRatio>Examples
1:1 Ratio
4:3 Ratio
9:16 Ratio
Props
<Aspect Ratio>
| Name | Default | Values |
|---|---|---|
| ratio* | - | number |
| className | - | string |