Aspect Ratio Demo

PreviousNext
Docs
aliimamexample

Preview

Loading preview…
registry/default/example/aspect-ratio/aspect-ratio-04.tsx
import { AspectRatio } from "@/registry/default/ui/aspect-ratio";

export default function AspectRatio04() {
  return (
    <div className="w-[300px] overflow-hidden">
      <AspectRatio ratio={1 / 1}>
        <img
          src="/ali.jpg"
          alt="Photo by Ali Imam"
          className="h-full w-full rounded-lg object-cover"
        />
      </AspectRatio>
    </div>
  );
}

Installation

npx shadcn@latest add @aliimam/aspect-ratio-04

Usage

import { AspectRatio04 } from "@/components/aspect-ratio-04"
<AspectRatio04 />