Aspect Ratio

Constrains content to a desired width-to-height ratio.

Powered by

Shadcn UI

Installation

npx shadcn@latest add @redpanda/aspect-ratio

pnpm dlx shadcn@latest add @redpanda/aspect-ratio

yarn dlx shadcn@latest add @redpanda/aspect-ratio

bunx shadcn@latest add @redpanda/aspect-ratio

nubx shadcn@latest add @redpanda/aspect-ratio

aube dlx shadcn@latest add @redpanda/aspect-ratio

When to use

Use AspectRatio when content (images, video embeds, maps, placeholders) must keep a fixed proportion regardless of the container width. The component reserves the correct height up front, which prevents layout shift while media loads.

Usage

import { AspectRatio } from '@/components/redpanda-ui/aspect-ratio';

<AspectRatio ratio={16 / 9} className="overflow-hidden rounded-lg bg-surface-subtle">  <img alt="Photo of a redpanda" className="h-full w-full object-cover" src="/images/redpanda.jpg" /></AspectRatio>

Anatomy

The AspectRatio component is a plain container styled with the CSS aspect-ratio property:

AspectRatio├── Base element (div, relative positioning)├── --ratio custom property - set from the ratio prop├── aspect-(--ratio) - CSS aspect-ratio driven sizing└── children - fill the box (use h-full w-full or absolute inset-0)

The container is relative, so children can use absolute inset-0 (or h-full w-full) to fill it. Add overflow-hidden plus a radius on the AspectRatio itself when clipping media to rounded corners.

Examples

Common Ratios

<AspectRatio ratio={1}>{/* square */}</AspectRatio><AspectRatio ratio={4 / 3}>{/* standard */}</AspectRatio><AspectRatio ratio={16 / 9}>{/* widescreen */}</AspectRatio>

Props

All other props are forwarded to the underlying div element.

Accessibility

• AspectRatio is purely presentational and adds no semantics or keyboard interactions.
• Provide meaningful alt text on images rendered inside the container.

Credits

• We take our inspiration from Shadcn UI for the aspect ratio component.