Components
Loading preview...
Displays content within a desired ratio.
npx shadcn@latest add https://21st.dev/r/shadcn/aspect-ratioimport Image from "next/image"
import { AspectRatio } from "@/components/ui/aspect-ratio"
export function AspectRatioDemo() {
return (
<AspectRatio ratio={16 / 9} className="bg-muted">
<Image
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Photo by Drew Beamer"
fill
className="h-full w-full rounded-md object-cover"
/>
</AspectRatio>
)
}