Preview Updated 2026-05-10

AspectRatio

Container that locks its child to a fixed aspect ratio (via CSS aspect-ratio) — handy for image, video, or iframe placeholders.

Basic usage

ratio is a number (width / height). Width follows the parent element; height is computed via CSS aspect-ratio.

16 / 9video cover

<CfAspectRatio :ratio="16 / 9">
<div>16 / 9 content</div>
</CfAspectRatio>

<CfAspectRatio ratio={16 / 9}>
<div>16 / 9 content</div>
</CfAspectRatio>

Common ratios

A visual reference for video, card thumbnails, portrait avatars, vertical video, and so on.

21 / 9影院

16 / 9视频

4 / 3旧屏

1 / 1方形

3 / 4人像

9 / 16短视频

<CfAspectRatio :ratio="21 / 9">…</CfAspectRatio>
<CfAspectRatio :ratio="16 / 9">…</CfAspectRatio>
<CfAspectRatio :ratio="4 / 3">…</CfAspectRatio>
<CfAspectRatio :ratio="1">…</CfAspectRatio>
<CfAspectRatio :ratio="3 / 4">…</CfAspectRatio>
<CfAspectRatio :ratio="9 / 16">…</CfAspectRatio>

<CfAspectRatio ratio={21 / 9}>…</CfAspectRatio>
<CfAspectRatio ratio={16 / 9}>…</CfAspectRatio>
<CfAspectRatio ratio={4 / 3}>…</CfAspectRatio>
<CfAspectRatio ratio={1}>…</CfAspectRatio>
<CfAspectRatio ratio={3 / 4}>…</CfAspectRatio>
<CfAspectRatio ratio={9 / 16}>…</CfAspectRatio>

Children fill automatically

Child nodes are stretched with position: absolute; inset: 0. Common <img> / <video> / <iframe> elements default to width: 100%; height: 100%; object-fit: cover — works out of the box.

media fills the frameimg / video / iframe

<CfAspectRatio :ratio="16 / 9">
<img src="cover.jpg" alt="Cover" />
</CfAspectRatio>

<CfAspectRatio :ratio="16 / 9">
<iframe src="https://www.youtube.com/embed/..." allowfullscreen />
</CfAspectRatio>

<CfAspectRatio ratio={16 / 9}>
<img src="cover.jpg" alt="Cover" />
</CfAspectRatio>

<CfAspectRatio ratio={16 / 9}>
<iframe src="https://www.youtube.com/embed/..." allowFullScreen />
</CfAspectRatio>

API

Prop	Type	Default	Description
`ratio`	`number`	`16 / 9`	Width / height ratio. Common values: `21/9` `16/9` `4/3` `1` `3/4` `9/16`