video元素不能直接设置aspect-ratio，因其为替换元素，固有宽高比由视频元数据决定；需用外层容器（如.video-cover）设aspect-ratio并配合object-fit控制封面显示。
video元素不能直接设aspect-ratio
浏览器会忽略video { aspect-ratio: 16 / 9 }，因为video是替换元素（replaced element），其固有宽高比由视频文件元数据决定，CSS 的aspect-ratio对它不生效——不是写错了，是规范如此。常见现象是封面图高度塌陷、压成一条线，或宽度正常但容器没高度。
必须用外层容器控制比例，且移除video的HTML尺寸属性
封面图本质是video在未播放时的首帧渲染，所以和视频容器逻辑完全一致。错误做法是给<video width="640" height="360"></video>加内联尺寸；这会覆盖 CSS 控制，导致移动端横向滚动或比例错乱。
- 删掉
video标签上所有width和height属性 - 用
<div class="video-cover"><video></video></div>包裹，把aspect-ratio写在.video-cover上 -
.video-cover必须设width: 100%（或max-width: 100vw），否则aspect-ratio不触发计算 - 避免同时设
height和aspect-ratio，后者会被忽略
object-fit和aspect-ratio必须配着用
aspect-ratio管容器盒子尺寸，object-fit管封面内容如何填满这个盒子——两者解决的是不同层级的问题，缺一不可。尤其当上传的视频本身是竖屏（如9:16）时，仅靠容器比例无法保证封面显示合理。
-
object-fit: cover：等比缩放+裁切，填满整个容器，适合强调视觉冲击的封面（但可能切掉人脸或关键文字） -
object-fit: contain：等比缩放+完整显示，上下/左右留黑边，适合教学类或需保留全部信息的封面 - 搭配
object-position: center可确保焦点区域居中，尤其在cover模式下有用 - 别用
object-fit: fill，强制拉伸一定变形，移动端尤其明显
兼容性兜底必须写在@supports外面
iOS Safari 15.2 及更早版本、部分安卓 WebView 完全忽略aspect-ratio，导致容器高度为 0，封面图消失。只测最新 Chrome 是危险的，真机连 iOS 15.2 都得跑一遍。
- 现代写法：
@supports (aspect-ratio: 1 / 1) { .video-cover { aspect-ratio: 16 / 9; } } - 降级方案必须写在
@supports块外部，例如：.video-cover { position: relative; padding-top: 56.25%; height: 0; } -
padding-top: 56.25%必须精确到小数点后两位（9 ÷ 16 = 0.5625），写成56.2%或56%会导致偏形 - 内部
video要加position: absolute; top: 0; left: 0; width: 100%; height: 100%才能撑满
preload策略强相关。如果video设了preload="none"，很多浏览器根本不会解码首帧，你就永远看不到封面——哪怕 CSS 全对。建议至少用preload="metadata"。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
