Aspect Ratio

Displays content within a desired ratio.

Installation

bash
npx shadcn@latest add aspect-ratio

Import

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

16:9

<div className="w-full max-w-sm">  <AspectRatio ratio={16 / 9} className="bg-muted">    <img      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800"      alt="Photo"      className="rounded-md object-cover w-full h-full"    />  </AspectRatio></div>

Other Ratios

// 4:3<AspectRatio ratio={4 / 3} className="bg-muted">  <img src="..." alt="Photo" className="rounded-md object-cover w-full h-full" /></AspectRatio>// Square (1:1)<AspectRatio ratio={1} className="bg-muted">  <img src="..." alt="Photo" className="rounded-md object-cover w-full h-full" /></AspectRatio>

Props

PROPTYPEDEFAULTDESCRIPTION
rationumber1The desired ratio (e.g. 16/9, 4/3, 1)