video 是替换元素，其宽高比由视频元数据决定，css 的 aspect-ratio 对其无效；正确做法是用容器包裹并设置 aspect-ratio，video 本身设 width:100%;height:100%;object-fit:cover。
video 元素直接写 aspect-ratio 为什么无效
因为 video 是替换元素（replaced element），它的宽高比由视频文件元数据决定，CSS 的 aspect-ratio 对它不生效——浏览器会直接忽略该声明，你在开发者工具里看到的 computed styles 中该属性状态是 “inactive”。这不是你写错了，是规范行为。常见现象包括：页面刚加载时 video 高度为 0、只显示一条细线；横竖屏切换后比例错乱；Safari 15.4–16.3 在 flex 容器中完全失效。
正确用法：必须用容器包裹并设 aspect-ratio
核心操作只有三步：
• 给 video 套一层 <div class="video-wrapper"></div>
• 把 aspect-ratio: 16 / 9 写在 wrapper 上，同时加 width: 100%（单独写 aspect-ratio 会导致容器塌陷）
• video 元素本身设 width: 100%; height: 100%; object-fit: cover，并移除 HTML 中的 width 和 height 属性（如 width="640" height="360"），否则会覆盖 CSS 控制
务必加 overflow: hidden 到 wrapper，防止 object-fit: cover 失效时内容溢出；若 wrapper 在 flex 容器中，还需加 flex-shrink: 0 或 min-width: 0，否则 Flex 默认的 min-width: auto 会锁死缩放空间。
兼容性与降级必须用 @supports 包裹
Chrome 88+、Firefox 89+、Safari 15.4+ 支持 aspect-ratio，但 Edge 91–102、iOS Safari 15.3 及更早版本会完全忽略该声明，导致容器高度为 0。不能只写新语法，也不能把降级样式和新样式平级写——那样旧浏览器会回退到无约束状态，CLS 更严重。
推荐写法：
• 外层用 @supports not (aspect-ratio: 1 / 1) 包裹 padding-top 方案（如 padding-top: 56.25% + position: relative）
• 新写法用 @supports (aspect-ratio: 1 / 1) 包裹，确保仅支持的浏览器执行
• 分数形式写 16 / 9，别写 16:9（非法）或 1.777（精度误差易引发 1px 裁切）
动态比例和不同场景怎么写才不踩坑
业务中视频来源多样，比例可能为 1 / 1、9 / 16、21 / 9，甚至服务端返回动态值。硬写死 16 / 9 很容易导致裁切或大片留白。
实用建议：
• 封面图用 aspect-ratio: 21 / 9，头像用 aspect-ratio: 1 / 1，卡片图用 aspect-ratio: 4 / 3
• 后端返回宽高后，内联写 style="aspect-ratio: ${w} / ${h}"
• 若 wrapper 在 grid 容器中，加 min-height: 0；在 flex 中加 align-items: start 防止 Safari 拉伸失真
最易被忽略的是：容器必须有明确宽度约束（width 或 max-width），且不能依赖 JS 计算——只有 DOM 解析阶段就能确定尺寸，才能从根源抑制 CLS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
