宽高比属性

最后更新：2026-09-13

aspect-ratio 宽高比属性

aspect-ratio 属性用于强制元素保持固定的宽高比，无需再通过 padding 百分比 hack 实现。默认值 auto 使用元素自身的固有比例（如图片）。它是 CSS 较新的特性，极大简化了响应式视频、卡片等比例容器的实现。

分类
初始值	auto
继承	否
适用于	all
可动画	length
CSS 版本	CSS3
状态	标准

📝 语法

aspect-ratio: auto || <ratio>;

⚙️ 取值

值	类型	描述
`auto`	关键字	使用元素固有宽高比
`<ratio>`	类型	指定宽高比，如 16/9

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
aspect-ratio	✓ v88	✓ v88	✓ v89	✓ v15	✓ v74
所有主流浏览器均支持

提示： aspect-ratio 配合 width:100% 可实现自适应等比例容器，常用于嵌入视频和图片。

❓ 常见问题

Qaspect-ratio 和 padding-top hack 有什么区别？

A两者都能实现等比例容器，但 aspect-ratio 是原生属性，更直观易维护：不需要 ::before 伪元素撑高、不需要绝对定位填充内容。padding-top hack 原理是用相对宽度的百分比内边距撑出高度，代码繁琐；aspect-ratio 一行代码即可，推荐新项目直接使用。

Q设置了 aspect-ratio 后 height 还有效吗？

Aaspect-ratio 会根据已确定的宽度自动计算高度，若同时显式设置了 height，height 会优先覆盖 aspect-ratio 计算出的高度，比例不再保证。想强制按比例，就不要设置 height，只设 width 和 aspect-ratio。另外 auto 值表示使用元素固有比例（如图片的原始宽高比）。

Qaspect-ratio 不生效是什么原因？

A常见原因：1）元素同时设置了 height，显式高度优先；2）元素没有宽度（width:auto 且内容为 0），比例没有可依据的宽度；3）浏览器版本过旧，该属性从 Chrome 88、Firefox 89、Safari 15 起才获得稳定支持。排查时先确认宽高状态，并给元素设置 width:100% 之类的宽度值。

Q如何用 aspect-ratio 做响应式视频容器？

A给容器设 width:100%; aspect-ratio:16/9，宽度随父元素变化时高度自动按比例计算，等比缩放，再让 iframe/video 绝对定位填满容器即可，替代 padding-top hack。图片加载场景也可给 img 容器预设 aspect-ratio，减少布局偏移（CLS）。