GitHub

Aspect Ratio

PreviousNext

Displays content within a desired ratio.

Loading
Loading...
import Image from "next/image";
import { AspectRatio } from "@/components/ui/aspect-ratio";
 
export function AspectRatioDemo() {
  return (
    <AspectRatio className="w-full max-w-sm rounded-lg bg-muted" ratio={16 / 9}>
      <Image
        alt="Photo"
        className="rounded-lg object-cover grayscale dark:brightness-20"
        fill
        src="https://avatar.vercel.sh/shadcn1"
      />
    </AspectRatio>
  );
}

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/aspect-ratio"

Usage

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>