import Image from "next/image"
import { AspectRatio } from "@/components/ui/aspect-ratio"
export function AspectRatioDemo() {
return (
<div className="w-full max-w-sm">
<AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
<Image
src="https://avatar.vercel.sh/shadcn1"
alt="Photo"
fill
className="w-full rounded-lg object-cover grayscale dark:brightness-20"
/>
</AspectRatio>
</div>
)
}
Installation
Usage
import { AspectRatio } from "@/components/ui/aspect-ratio"<AspectRatio ratio={16 / 9}>
<Image src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>Examples
Square
A square aspect ratio component using the ratio={1 / 1} prop. This is useful for displaying images in a square format.
import Image from "next/image"
import { AspectRatio } from "@/components/ui/aspect-ratio"
export function AspectRatioSquare() {
return (
<div className="w-full max-w-[12rem]">
<AspectRatio ratio={1 / 1} className="bg-muted rounded-lg">
<Image
src="https://avatar.vercel.sh/shadcn1"
alt="Photo"
fill
className="rounded-lg object-cover grayscale dark:brightness-20"
/>
</AspectRatio>
</div>
)
}
Portrait
A portrait aspect ratio component using the ratio={9 / 16} prop. This is useful for displaying images in a portrait format.
import Image from "next/image"
import { AspectRatio } from "@/components/ui/aspect-ratio"
export function AspectRatioPortrait() {
return (
<div className="w-full max-w-[10rem]">
<AspectRatio ratio={9 / 16} className="bg-muted rounded-lg">
<Image
src="https://avatar.vercel.sh/shadcn1"
alt="Photo"
fill
className="rounded-lg object-cover grayscale dark:brightness-20"
/>
</AspectRatio>
</div>
)
}
API Reference
AspectRatio
The AspectRatio component displays content within a desired ratio.
For more information, see the Radix UI documentation.