Layout

AspectRatio

Constrains its child to a fixed width/height ratio; the child fills the box. Useful for media, maps and embeds.

Import

import { AspectRatio } from "@zephora/react";

The default ratio suits video embeds and hero media.

16 : 9

<AspectRatio ratio={16 / 9}>
  <img src="/landscape.jpg" alt="Landscape" />
</AspectRatio>

Any number works — 1 for squares, 4/3 for classic photos.

1 : 1

4 : 3

<AspectRatio ratio={1}>…</AspectRatio>
<AspectRatio ratio={4 / 3}>…</AspectRatio>

Prop	Type	Default	Description
`ratio`	`number`	`16 / 9`	Width / height ratio (e.g. 16/9, 1, 4/3).
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.