video元素直接设aspect-ratio无效，因其是替换元素，固有宽高比由视频元数据决定，CSS的aspect-ratio对其不生效；必须用容器设aspect-ratio并让video填满，配合object-fit控制显示，才能防止布局抖动。
video元素直接设aspect-ratio为什么无效
浏览器会忽略 video 上的 aspect-ratio 声明，因为它属于替换元素（replaced element），其固有宽高比由视频文件元数据决定，CSS 的 aspect-ratio 对它不生效——不是 bug，是规范行为。你写 video { aspect-ratio: 16 / 9; }，实际高度不会变，可能塌陷或拉伸。
必须用容器控制比例，再让 video 填满该容器。否则在页面加载初期，video 尚未解析元数据时，浏览器按默认 inline 尺寸渲染（通常约 300×150px），造成明显的布局偏移（CLS）。
- 移除
video标签上的width和height属性（如width="640" height="360"），它们会覆盖 CSS 控制，加剧偏移 - 外层容器设为块级（
display: block或display: grid），避免 Safari 在 flex 容器中对aspect-ratio的兼容性问题 - 容器加
width: 100%+aspect-ratio: 16 / 9，不设height—— 浏览器会在解析 HTML 阶段就预留正确空间，从根源抑制 CLS
如何防止首次加载时的布局抖动
布局偏移（CLS）常发生在视频元数据未加载完成前：浏览器先按 video 默认尺寸占位，等视频头读取完毕才调整大小，导致下方内容突然下移。
用容器提前“锁定”空间是唯一可靠解法。关键在于：容器的尺寸必须在 DOM 解析阶段即可确定，不依赖 JS 或资源加载。
立即学习“前端免费学习笔记（深入）”；
- 容器使用
aspect-ratio: 16 / 9（推荐分数写法，非小数），配合width: 100%，浏览器无需等待视频就能计算出高度 - 若需兼容 Safari 15.4–16.3（flex 子项中
aspect-ratio失效），把父容器从display: flex改为display: grid，或加align-items: start - 降级方案必须用
@supports (aspect-ratio: 1 / 1)包裹新写法，外部写padding-top: 56.25%+position: relative，否则旧浏览器会因解析失败而回退到无约束状态，CLSS 更严重
object-fit 和 overflow 配合 aspect-ratio 的必要性
aspect-ratio 只管容器盒模型尺寸，不管内部 video 如何显示。不加约束的话，视频可能被拉伸、留黑边，甚至溢出容器边界，反而放大视觉跳动。
必须显式控制内容适配方式：
-
video { width: 100%; height: 100%; object-fit: cover; }—— 填满且保持比例，裁切多余部分（最常用） - 若需完整显示，改用
object-fit: contain，但要加overflow: hidden防止容器被撑大（尤其当视频比例与容器不一致时） - 避免同时设
max-width和width: 100%，后者已足够；max-width: 100vw可加在容器上，防超宽设备横向滚动
动态宽高比场景下的精度陷阱
从 API 获取视频宽高后拼接 aspect-ratio，常见错误是直接用浮点近似：aspect-ratio: 1.777。某些浏览器（尤其移动端 WebKit）解析时精度丢失，窄屏下出现 1px 黑边或裁切，肉眼可见抖动。
正确做法是还原为最简整数比：
- 用
gcd(w, h)约分，例如 3840×2160 →gcd(3840, 2160) === 240→3840/240 = 16,2160/240 = 9→ 得"16/9" - 永远用斜杠分隔（
16 / 9），不用冒号或小数；不要在 JS 中拼style.aspectRatio = w/h，应拼${w}/${h} - 如果无法运行 JS（如 SSR 页面），至少 fallback 到通用比例（如
16 / 9），比不设或错设强
真正难的不是写出 aspect-ratio，而是让它的效果从 HTML 解析第一帧就开始稳定存在——这要求容器结构、属性顺序、降级逻辑全部对齐浏览器渲染管线。任何环节漏掉，CLS 就会回来敲门。
