CSS aspect-ratio 宽高比
CSS aspect-ratio属性：aspect-ratio:16/9固定宽高比、与padding-top hack对比（简洁/原生/动态内容）、img中的使用（防止CLS布局偏移）、视频容器响应式 · 难度：入门 · +10XP
CSS aspect-ratio —— 固定宽高比的终极方案
以前要保持元素宽高比（如视频16:9），得用臭名昭著的"padding-top hack"。现在aspect-ratio一行搞定。
基本用法
.video-container {
width: 100%;
aspect-ratio: 16 / 9; /* 宽度变了，高度自动跟随 */
}只需设置宽度（或高度），另一个维度自动计算！
常见比例
| 场景 | aspect-ratio值 |
|---|---|
| 视频 | 16 / 9 |
| 正方形头像 | 1 / 1 |
| 电影 | 21 / 9 |
| 照片（4:3） | 4 / 3 |
| 照片（3:2） | 3 / 2 |
动手练习
- 基础练习：做一个始终16:9的响应式视频容器，宽度100%。
- 进阶应用：用aspect-ratio替换项目中所有padding-top hack的实例。
- 项目实战：做一个图片预览组件——无论原图什么比例，预览区始终保持3:2。