Aspect Ratio

Displays content within a desired ratio.

Try resizing to see the aspect ratio maintained

Installation

npx shadcn@latest add aspect-ratio

import Image from "next/image"
import { AspectRatio } from "@/components/ui/aspect-ratio"

<div className="w-[450px]">
<AspectRatio ratio={16 / 9}>
  <Image src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>
</div>