开发预览更新于 2026-05-10

AspectRatio 宽高比

锁定子元素宽高比的容器（基于 CSS aspect-ratio），常用于图片 / 视频 / 嵌入帧占位。

基础用法

ratio 是一个数字（宽 / 高）。容器宽度跟随父元素，高度由 CSS aspect-ratio 计算。

16 / 9video cover

<CfAspectRatio :ratio="16 / 9">
<div>16 / 9 内容</div>
</CfAspectRatio>

<CfAspectRatio ratio={16 / 9}>
<div>16 / 9 内容</div>
</CfAspectRatio>

常用比例

视频、卡片缩略图、人像头像、短视频 … 比例的视觉对照。

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>

子元素自动撑满

子节点会被 position: absolute; inset: 0 撑满。常见的 <img> / <video> / <iframe> 默认 width: 100%; height: 100%; object-fit: cover，开箱即用。

media fills the frameimg / video / iframe

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

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

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

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

API

属性	类型	默认值	说明
`ratio`	`number`	`16 / 9`	宽 / 高比。常用值：`21/9` `16/9` `4/3` `1` `3/4` `9/16`