video元素上直接写aspect-ratio: 16 / 9无效，因其是替换元素，宽高比由视频元数据决定，CSS该属性被浏览器忽略；必须用容器包裹并设aspect-ratio、width: 100%、video填满且移除内联宽高属性。
video 元素上直接写 aspect-ratio: 16 / 9 为什么无效
因为 video 是替换元素（replaced element），浏览器按其内建元数据（如视频文件头里的宽高信息）决定固有尺寸，aspect-ratio 对它完全被忽略。你在开发者工具里会看到该声明标为 “inactive”，计算出的 height 往往是 auto 或 0px，导致常见现象包括：页面刚加载时视频只显示一条细线、下方内容突然下移（CLS）、横竖屏切换后比例错乱。
必须用 div 容器包裹并设 aspect-ratio
真正起作用的是给 video 的父容器（比如 <div class="video-wrapper">）设置 aspect-ratio，让布局引擎在首帧渲染前就锁定空间：
-
video标签里必须移除width和height内联属性（如width="640"），否则会覆盖 CSS 控制 - 包裹容器推荐设
display: block或display: grid；避免嵌套在display: flex父容器中（Safari 15.4–16.3 会忽略其aspect-ratio） - 语法必须是
16 / 9这种空格分隔的分数形式，不能写成16:9或1.777 - 容器不能设
height，否则与aspect-ratio冲突，导致高度计算异常 - 只写
aspect-ratio: 16 / 9不够——它不提供宽度基准，必须搭配width: 100%或max-width: 800px才能生效
video 本身怎么填满容器且不拉伸
aspect-ratio 只管容器盒子尺寸，不管里面视频如何铺满。不加约束的话，video 可能撑破、留黑边、甚至被拉伸：
-
video必须设width: 100%+height: 100% - 必须加
object-fit: cover（裁边填满）或object-fit: contain（完整居中），根据内容需求选 - 建议给容器加
overflow: hidden，防止object-fit: cover失效时内容溢出 - 如果容器用了
position: relative，可对video加position: absolute; inset: 0确保严丝合缝
兼容旧浏览器的降级方案怎么写
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）支持良好，但 Safari 15.3 及更早版本、所有 IE 都不支持 aspect-ratio。生产环境必须降级：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports not (aspect-ratio: 1 / 1)包裹 fallback 规则，避免覆盖新特性 - 父容器设
position: relative，禁用height，用padding-top: 56.25%（16:9 = 9 ÷ 16 = 0.5625）模拟比例 -
video设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 百分比必须精确到小数点后两位（
56.25%），少一位（如56.2%）就会偏形
真正容易被忽略的是：所有尺寸逻辑必须在 DOM 解析阶段完成，不能依赖 JS 计算、不能等视频元数据加载、也不能靠回退。否则 CLS 无法避免。
