Layout UI

Aspect Ratio

Pure CSS aspect-ratio wrapper. Server-compatible with no client JavaScript required.

Preview

Photo by Drew Beamer

Installation

bash
npx shadcn@latest add @layout/aspect-ratio

Usage

tsx
import { AspectRatio } from "@/registry/layout/aspect-ratio/aspect-ratio";

Examples

Square thumbnail

1:1

Video embed

Video player placeholder

Guidelines for AI agents

Pass a ratio prop (e.g. 16/9, 4/3, 1) and place content inside that fills size-full. Wrap in a container with overflow-hidden and a border-radius to clip the content to the box. Suitable for images, iframes, and video embeds.

Never

  • Neverset an explicit height on AspectRatio; the aspect-ratio CSS property derives height from width automatically
  • Neveruse AspectRatio for non-media content that has a natural height; it is for enforcing visual proportions only
  • Neverrely on padding-top percentage hacks; this component uses the native CSS aspect-ratio property supported in all modern browsers