aspect-ratio 不能直接写在 video 元素上，因其是替换元素，固有宽高比由视频元数据决定，css 的 aspect-ratio 对其无效；必须用容器包裹并设置 aspect-ratio、width 和 overflow 等配合属性。
aspect-ratio 不能直接写在 video 元素上——浏览器会忽略它，视频高度塌陷或拉伸。这不是你代码错了，是规范行为。
为什么 video { aspect-ratio: 16 / 9 } 不生效
video 是替换元素（replaced element），它的固有宽高比由视频文件元数据决定，CSS 的 aspect-ratio 对其不作用。你在开发者工具里看到该属性状态为 “inactive”，computed height 往往是 auto 或 0px。
常见现象包括：
- 页面刚加载时
video高度为 0，只显示一条细线 - 横竖屏切换后比例错乱，尤其在 Safari 15.4–16.3 的
display: flex容器中 - 服务端返回不同宽高比（如
9 / 16、21 / 9）时硬写死16 / 9导致裁切或留白
必须用容器包裹并设 aspect-ratio
核心操作就三步，缺一不可：
- 给
video套一层<div class="video-wrapper"></div> -
.video-wrapper上写aspect-ratio: 16 / 9+width: 100%（单独写aspect-ratio会导致容器塌陷） -
video本身设width: 100%+height: 100%+object-fit: cover，并移除 HTML 中的width和height属性（如width="640"）
务必加 overflow: hidden 到 .video-wrapper，防止 object-fit: cover 失效时内容溢出；若 .video-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，甚至服务端返回动态值。
- 封面图用
aspect-ratio: 21 / 9，头像用aspect-ratio: 1 / 1，卡片图用aspect-ratio: 4 / 3（兼顾横竖构图） - 后端返回宽高后，内联写
style="aspect-ratio: ${w} / ${h}"，注意转义除号、避免空格 - 若用 JS 动态注入，优先在 DOM 解析完成前设置 wrapper 的
style，否则仍可能触发 CLS
最易被忽略的是：容器没设 width 就只写 aspect-ratio，浏览器根本算不出高度；还有 Safari 在 flex 父容器中对子项 aspect-ratio 的兼容性 bug —— 换成 display: grid 或加 align-items: start 才稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
