Docs
Aspect Ratio

Aspect Ratio

Displays content within a desired ratio.

Radix UIAPI Reference
Photo by Drew Beamer

Installation

npx shadcn-ui add aspect-ratio
npx shadcn-ui add aspect-ratio

Usage

import Image from "next/image"
 
import { AspectRatio } from "@/components/ui/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>
<div className="w-[450px]">
  <AspectRatio ratio={16 / 9}>
    <Image
      src="..."
      alt=Image""
      className="rounded-md object-cover"
    />
  </AspectRatio>
</div>
Alert DialogAvatar