video元素上直接写aspect-ratio无效，因其是替换元素，宽高比由视频元数据决定；必须用外层容器设width:100%和aspect-ratio:16/9，并清空video内联宽高、设width:100%;height:100%;object-fit:cover。
video 元素上直接写 aspect-ratio 无效
这不是你代码写错了，是浏览器按规范忽略它。video 是替换元素（replaced element），它的宽高比由视频文件元数据决定，aspect-ratio 对它完全不生效。你在 DevTools 里看到该属性被划掉、height 计算为 auto 或 0，就是这个原因。
常见现象包括：
- 页面加载瞬间
video高度为 0，只显示一条细线 - 宽度正常但高度塌陷，内容被裁切或留大片黑边
- 横竖屏切换后比例错乱，CLS（布局偏移）明显
必须用外层容器包裹并设 aspect-ratio + width
aspect-ratio 只在「宽度可测、高度未锁定」时才触发计算。单独写 aspect-ratio: 16 / 9，容器很可能塌成一条线——因为浏览器不知道“宽多少”，就无法算出“高多少”。
稳定生效的最小组合是：
-
width: 100%（或max-width、flex-basis等明确宽度来源） -
aspect-ratio: 16 / 9（斜杠前后各一个空格，不能写成16/9或16:9） - 不声明
height（包括height: auto、height: 100%） - 容器
display为block、flex或grid
示例：
.video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
}
video 标签本身要清空内联尺寸并填满容器
即使容器比例正确，video 内容仍可能拉伸、溢出或留黑边。必须同步处理子元素：
- 移除
<video></video>的width和height属性（如width="640" height="360"），否则会覆盖 CSS 行为 -
video设width: 100%; height: 100%（仅在相对/绝对定位或 flex/grid 子项中有效） - 必须加
object-fit: cover（或contain）控制内容填充方式；漏配会导致默认拉伸失真
注意：object-fit 在旧版安卓 WebView（如 UC、Samsung Browser）中支持不稳定，真机测试不可跳过。
Safari 15.3 及更早版本需降级到 padding-bottom hack
Safari 15.3 及更早完全忽略 aspect-ratio，且无警告。若项目仍需兼容 macOS Monterey 或某些企业内网环境，必须 fallback：
- 容器设
position: relative; width: 100%; height: 0 -
padding-bottom: 56.25%（16:9 → 9 ÷ 16 = 0.5625） -
video设position: absolute; top: 0; left: 0; width: 100%; height: 100%
别依赖文件名判断比例（cover-16x9.jpg 不代表就是 16:9），实际比例应以视频元数据或服务端返回为准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
