build69
Sign inGet API key
build69  /  Components  /  Layout & Surfaces  /  AspectRatio

AspectRatio

v1.0.1Updated 20 Jul 2026

Locks content to a fixed width÷height ratio while the width stays fluid. Built on Radix AspectRatio with preset ratio strings, corner rounding, and automatic media fitting: direct img / video / iframe children are stretc

View source← Back to catalog

Preview

Live · 9 stories
DefaultOpen ↗
▸Why this is recommendedratiomediaimagevideo+3

The default, out-of-the-box AspectRatio.

Recommended for+14
  • ✓Product photo thumbnails
  • ✓Card hero images
  • ✓Video embeds (16:9)
  • ✓Social/story previews (9:16)
  • ✓Banner strips (21:9)
Tags+6
ratiomediaimagevideothumbnailradixdefault
Features+4
  • Preset ratio strings: 1:1 / 4:3 / 16:9 / 21:9 / 3:4 / 9:16
  • Raw numeric ratios (e.g. 2.35 cinemascope)
  • Invalid ratios safely fall back to 1
  • Rounding presets: none / sm / md / lg / xl
  • overflow-hidden frame owns the clipping
  • Direct img / video / iframe children auto-fill with object-cover
  • className passthrough on the root
  • Purely presentational — no ARIA of its own; media children keep their alt text
Not recommended for−2
  • ✕Intrinsic-size images that should not crop (use plain img)
  • ✕Full-bleed backgrounds (use CSS background sizing)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "AspectRatio" })

Usage

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

<AspectRatio ratio="16:9" rounded="lg">
  <img src={dish.photo} alt={dish.name} />
</AspectRatio>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
ratio

Width ÷ height; preset string or any positive number (default 16:9)

number | '1:1' | '4:3' | '16:9' | '21:9' | '3:4' | '9:16'—
rounded

Corner rounding applied to the clipped frame (default lg)

'none' | 'sm' | 'md' | 'lg' | 'xl'—
className

Extra classes merged onto the frame

string—

Related

Platform docsAll componentsSource files