Components

Aspect Ratio

Constrains its content to a fixed width-to-height ratio.

Installation

npx shadcn@latest add @blank/aspect-ratio

Usage

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

<AspectRatio ratio={16 / 9}>
  <img src="/cover.jpg" alt="Cover" className="size-full object-cover" />
</AspectRatio>

Examples

Image

A chair against a plain wall