Chapter 11: Aspect Ratio

Core Idea

A single-purpose primitive that constrains its content to a given width:height ratio, regardless of the content's natural size.

Key Concepts

• ratio prop: a number (width divided by height, e.g. 16 / 9), defaulting to 1 (square).
• Single-part anatomy: just AspectRatio.Root — no sub-parts, unlike most other primitives.

Code Examples

import { AspectRatio } from "radix-ui";

<AspectRatio.Root ratio={16 / 9}>
  <img src="..." style={{ objectFit: "cover", width: "100%", height: "100%" }} />
</AspectRatio.Root>

• What it demonstrates: the standard use case — a responsive media container (image/video/iframe) that keeps a fixed aspect ratio at any width.

Key Takeaways

1. This is the simplest primitive in the library — one part, one prop — reach for it whenever you need a ratio-locked container instead of hand-rolling the padding-percentage-hack CSS.
2. Pair with object-fit: cover (or contain) on the child media element to control how it fills the ratio box.

Connects To

• Avatar: another simple, single-purpose primitive with a similarly small API surface.