Aspect Ratio
Displays content within a desired ratio. Useful for images and video embeds.
16:9
Installation
npx shadcn add aspect-ratio --registry https://ui.ch.sh/r
Usage
import { AspectRatio } from "@/components/ui/aspect-ratio"
export default function Example() {
return (
<AspectRatio ratio={16 / 9}>
<img src="/image.jpg" alt="Photo" className="h-full w-full object-cover" />
</AspectRatio>
)
}