AspectRatio
Constrains a single child to a fixed width-to-height ratio using a CSS custom property. Useful for responsive images, video embeds, and cards that must maintain a consistent shape.
Square (1:1)
1:1
<AspectRatio ratio={1}>
<div>1:1</div>
</AspectRatio>Widescreen (16:9)
16:9
<AspectRatio ratio={16 / 9}>
<div>16:9</div>
</AspectRatio>Portrait (2:3)
2:3
<AspectRatio ratio={2 / 3}>
<div>2:3</div>
</AspectRatio>Props
| Prop | Type | Default | Description |
|---|---|---|---|
ratio | number | 1 | Width-to-height ratio as a decimal (e.g. 16/9) |
component | string | 'div' | HTML element to render as the root node |
class | string | — | Additional CSS class names |
style | object | — | Inline styles merged with generated styles |
children | ReactNode | — | Single child element constrained to the ratio |