GitHub
Docs
Aspect Ratio

Aspect Ratio

Displays content within a desired ratio.

Preview

Photo by Drew Beamer

Installation

npx shadcn@latest add aspect-ratio

Usage

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

<AspectRatio ratio={16 / 9}>
  <img src="..." alt="Image" className="h-full w-full object-cover" />
</AspectRatio>