Aspect Ratio

Installation

npx shadcn@latest add @kanpeki/aspect-ratio

Anatomy

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

<AspectRatio ratio={16 / 9}>
  <Image src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>;

Examples

Square

A square aspect ratio component using the ratio={1 / 1} prop. This is useful for displaying images in a square format.

Portrait

A portrait aspect ratio component using the ratio={9 / 16} prop. This is useful for displaying images in a portrait format.

API Reference