aspect-ratio 不能直接写在 video 元素上，因其是替换元素，固有宽高比由视频元数据决定，css 的 aspect-ratio 对其不生效，需用容器包裹并设置 aspect-ratio。
aspect-ratio 不能直接写在 video 元素上——浏览器会忽略它，视频高度塌陷或拉伸，这不是你代码写错了，是规范行为。
为什么 video { aspect-ratio: 16 / 9 } 不生效
video 是替换元素（replaced element），它的固有宽高比由视频文件元数据决定，CSS 的 aspect-ratio 对它不作用。你写上去，开发者工具里看到的 computed styles 中该属性状态是 “inactive”，实际高度不会按比例计算。
常见错误现象包括：
- 页面刚加载时，
video显示为一条细线（高度为 0） - 宽度正常，但高度没撑开，内容被裁掉顶部/底部
- 横竖屏切换后比例错乱，尤其在 Safari 15.4–16.3 的 flex 容器中
根本原因：浏览器在解析视频元数据前，按默认 inline 尺寸（约 300×150px）渲染，导致布局偏移（CLS）。
必须用容器包裹并设 aspect-ratio
正确做法是给 video 套一层 <div class="video-wrapper">，把 <code>aspect-ratio 写在 wrapper 上，再让 video 填满它。
关键实操点：
- 移除
<video></video>标签上的width和height属性（如width="640" height="360"），否则会覆盖 CSS 控制 - wrapper 必须带明确宽度约束，例如
width: 100%或max-width: 100%；单独写aspect-ratio: 16 / 9会导致容器塌陷 -
video元素需设width: 100%; height: 100%+object-fit: cover（或contain），否则可能留黑边或拉伸 - 分数形式写
16 / 9，别写1.777或16:9——后者非法，前者精度误差易引发 1px 裁切
@supports 降级处理旧浏览器
Chrome 88+、Firefox 89+、Safari 15.4+ 支持 aspect-ratio，但 Edge 91–102、旧版 iOS Safari 会完全忽略该声明，导致容器高度为 0。
推荐兜底方案：
- 用
@supports not (aspect-ratio: 1 / 1)包裹降级样式 - 降级用
padding-top: 56.25%（16:9 = 9 ÷ 16 = 0.5625）+ 绝对定位，兼容 IE9+ - 务必加
overflow: hidden到 wrapper，防止object-fit: cover失效时内容溢出 - 若 wrapper 在
display: flex容器中，加flex-shrink: 0防止被压缩失真；在 grid 中加min-height: 0
不同宽高比和动态场景怎么写
别硬写死 16 / 9。业务中视频来源多样，比例可能为 1:1、9:16、21:9，甚至服务端返回动态值。
实用建议：
- 封面图用
aspect-ratio: 21 / 9，头像用aspect-ratio: 1 / 1，卡片图用aspect-ratio: 4 / 3（兼顾横竖构图） - 后端返回宽高后，内联写
style="aspect-ratio: ${w} / ${h}"，避免 JS 计算小数精度问题 - 横竖屏切换频繁的场景（如移动端全屏播放），优先用
display: grid替代 flex 布局，规避 Safari 的 flex 子项 bug - 调试时检查 computed styles 中
aspect-ratio是否显示为 “active”，不是就说明被忽略或写法非法
最易被忽略的一点：哪怕用了 aspect-ratio，也得确认父容器没有 max-height、overflow: hidden 或 transform 类样式干扰高度计算——这些都会让比例“看起来”失效。
