video标签上直接写aspect-ratio无效，因其是替换元素，宽高比由视频元数据决定；必须用容器设aspect-ratio: 16 / 9、width: 100%，video设width: 100%; height: 100%; object-fit: cover，并移除内联宽高属性。
video标签上直接写aspect-ratio为什么没反应
因为<video>是替换元素（replaced element），浏览器按视频文件元数据决定其固有宽高比，aspect-ratio对该元素完全无效——开发者工具里该声明会显示为“inactive”，不是你漏写了单位或拼错了。常见现象是容器高度塌陷为 0，视频只显示一条细线，或加载后突然下移（CLS）。Safari 15.4–16.3 在 display: flex 父容器中甚至完全跳过计算。
必须用div包裹并设aspect-ratio的三个硬性条件
缺一不可，否则比例失控或首次渲染留白：
-
<video>标签上必须移除width和height属性（如width="640" height="360"），否则 HTML 内联尺寸会覆盖 CSS 控制 - 包裹容器（如
<div class="video-wrapper">）必须设width: 100%或明确的max-width（例如max-width: 800px）；只写aspect-ratio: 16 / 9而无宽度基准，容器可能塌成一条线 - 容器推荐设
display: block或display: grid；避免嵌套在display: flex父容器中（Safari bug），若无法避免，临时加align-items: start
object-fit和overflow为什么不能省
aspect-ratio只管容器盒子尺寸，不管内部视频怎么铺满。不加约束会导致拉伸、黑边或内容溢出，反而放大视觉跳动：
-
<video>必须设width: 100%; height: 100%，再配object-fit: cover（裁切填满）或object-fit: contain（完整居中） - 包裹容器需加
overflow: hidden，防止object-fit: cover时边缘溢出 - 若用绝对定位（如 Tailwind 的
inset-0），记得加position: relative到容器上，否则inset-0失效
兼容旧浏览器的降级方案怎么写才不翻车
Chrome 88+、Firefox 89+、Safari 15.4+ 支持原生 aspect-ratio，但 iOS 15.2 或某些安卓 WebView 仍需 fallback。错误写法会让旧浏览器直接失去高度控制，CLS 更严重：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (aspect-ratio: 1 / 1)包裹现代样式，降级代码写在外部（不是@supports not） - padding-top 方案必须写对：16:9 对应
padding-top: 56.25%（9 ÷ 16 = 0.5625），写成56%或56.2%会偏形 - 父容器设
position: relative，子<video>设position: absolute; top: 0; left: 0; width: 100%; height: 100%，且父容器不能设height - 动态比例（如 9:16 竖屏）不能靠类名蒙混，得算出
16 / 9 ≈ 1.777这种小数——必须用最简整数比9 / 16，否则精度误差易引发 1px 黑边
真正难的是 SSR 或懒加载场景下，wrapper 没触发 BFC（比如忘了 display: block 或 position: relative），首次渲染高度仍为 0 —— 这个点在 DevTools 里看不出明显线索，得靠 computed height 值和 CLS 报告交叉验证。
