video元素不支持aspect-ratio，需用包裹容器设置；必须移除video的width/height属性，容器设width+aspect-ratio，并配合object-fit控制内容填充，同时注意浏览器兼容性与BFC触发。
video 元素不能直接设 aspect-ratio
浏览器会忽略 video { aspect-ratio: 16 / 9 }，因为 video 是替换元素（replaced element），其固有宽高比由视频文件元数据决定，CSS 的 aspect-ratio 对它不生效——不是写错了，是规范如此。常见现象是容器高度为 0，视频压成一条线，或宽度正常但高度塌陷。
必须用包裹容器控制比例：<div class="video-wrapper"><video></video></div>，然后把 aspect-ratio 设在 .video-wrapper 上。
- 移除
<video>标签上的width和height属性（如width="640" height="360"），否则会覆盖 CSS 控制 -
.video-wrapper必须是块级容器，推荐加display: block或display: grid（避开 Safari 15.4–16.3 在flex子项中对aspect-ratio的兼容性 bug） - 不要给
video设height固定值，否则会覆盖aspect-ratio计算出的高度
移动端浏览器支持需分层处理
iOS Safari 15.4+、Chrome Android 100+、Firefox Android 102+ 才原生支持 aspect-ratio；低于这些版本（比如 iOS 15.2）会完全忽略该声明，导致容器塌缩。不能只测最新 Chrome，真机连 iOS 15.2 都得跑一遍。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (aspect-ratio: 1 / 1)包裹现代样式，降级方案写在外部 - 旧版兜底用
padding-top: 56.25%（16:9）+position: relative/absolute，注意别写成56%或56.2%——少一位小数就偏形 - 若项目仍需支持 IE 或极老安卓 WebView，就得回退到 JS 方案，纯 CSS 不够用
aspect-ratio 必须配合 width 才生效
aspect-ratio 只定义比例，不决定尺寸。单独写 aspect-ratio: 16 / 9 而无宽度约束，容器可能塌成一条线或无限拉伸。
正确写法：
-
width: 100%+aspect-ratio: 16 / 9：容器随父级变宽，高度自动撑开 -
max-width: 100vw+aspect-ratio: 16 / 9：防超宽溢出视口 - 避免同时设
height和aspect-ratio，后者会被忽略 - Flex/Grid 布局中要额外加约束：
flex-shrink: 0或min-height: 0，防止隐式规则干扰比例计算
object-fit 和 aspect-ratio 必须配着用
aspect-ratio 管容器盒子，object-fit 管视频内容如何填充这个盒子——两者解决的是不同层级的问题，缺一不可。
典型组合：
-
object-fit: contain：完整显示，居中，上下/左右留黑边，适合教学类视频 -
object-fit: cover：填满容器，裁剪边缘，适合背景视频或封面展示 -
video必须设width: 100%; height: 100%（或position: absolute; inset: 0），否则不会铺满父容器 - 别误以为设了
aspect-ratio就不用object-fit——没它，视频照样可能拉伸或留大片空白
最易被忽略的点：容器高度塌陷往往不是因为没写 aspect-ratio，而是父容器没触发 BFC，或 video 还没加载完就被渲染，而提前锁定空间的唯一可靠方式，就是让容器在 DOM 解析阶段就能确定尺寸——这要求所有依赖都纯 CSS、无 JS、无资源加载延迟。
