Aspect Ratio

Installation

npx shadcn@latest add @uqudo/aspect-ratio

Usage

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

<AspectRatio ratio={16 / 9}>
  <Image src="/photo.jpg" alt="Photo" fill className="rounded-lg object-cover" />
</AspectRatio>

The component takes the full width of its parent and sets its height from ratio. Constrain the parent's width to control the final size, and let the child fill the box with absolute inset-0 (or Next.js fill) or size-full.

API Reference

AspectRatio

A thin wrapper around AspectRatioPrimitive.Root that adds data-slot="aspect-ratio". It has no styles of its own.