video 是替换元素，aspect-ratio 对其无效，必须用容器包裹并配合 object-fit 和 padding-top 降级方案。
aspect-ratio 不能直接写在 <video></video> 标签上，写了也无效——浏览器会忽略，视频高度塌陷或拉伸变形。必须用容器包裹，再配合 object-fit 和降级方案。
为什么 <video></video> 上加 aspect-ratio: 16 / 9 没反应
<video></video> 是替换元素（replaced element），它的宽高由视频元数据或内联 width/height 属性决定，CSS 的 aspect-ratio 对其不生效。你写 video { aspect-ratio: 16 / 9 }，现代浏览器直接跳过，导致容器高度为 0 或被撑开错乱。
- 常见错误现象：视频压成一条横线、上下大片留白、加了
width="640" height="360"后 CSS 完全失效 - 务必移除
<video></video>标签上的width和height属性，否则它们会覆盖所有 CSS 控制逻辑 - 即使 Chrome/Firefox 支持
aspect-ratio，对<video></video>本身的支持也不一致；Safari 15.4–16.3 更是完全忽略
Bootstrap 5.3+ 正确用法：ratio ratio-16x9 必须套在容器上
Bootstrap 的 .ratio 类本质是给容器设 aspect-ratio: 16 / 9 + fallback padding-top: 56.25%，它只对块级父容器起作用，且依赖子元素绝对定位填满。
- 结构必须是：
<div class="ratio ratio-16x9"><video></video></div>，不能把ratio-16x9加在<video></video>自身 -
<video></video>必须加class="w-100 h-100 object-fit-cover"（Bootstrap 5.3+ 才内置object-fit-*工具类） - 旧版 Bootstrap（如 5.2 及更早）没有
object-fit-cover，得手动加style="object-fit: cover"或补 CSS - 如果父容器是
display: flex，Safari 15.4–16.3 会忽略aspect-ratio，临时解法是改父容器为display: grid或加align-items: start
兼容性兜底：用 @supports 降级到 padding-top 方案
微信 iOS v8.0.4x 虽识别 aspect-ratio，但渲染异常；Safari 15.4 之前完全不支持。靠单一新属性不可靠，必须降级。
- 用
@supports (aspect-ratio: 1 / 1)包裹新写法，外部提供传统padding-top: 56.25%+position: relative容器 - 子
<video></video>必须设position: absolute; top: 0; left: 0; width: 100%; height: 100%，否则 padding 带来的高度空间会被浪费 -
padding-top: 56.25%不能写成56%或56.2%——16:9 对应的是9 / 16 = 0.5625，少一位小数就会比例偏移 - 若需动态比例（比如从 API 拿到
{ width: 3840, height: 2160 }），永远用最简整数比（16/9），别用小数（1.777），部分浏览器解析失败
object-fit 选 cover 还是 contain？
这不是风格偏好问题，而是内容安全边界问题。
-
object-fit: cover：裁剪填满，无黑边，比例严格，但可能切掉人脸或关键区域；推荐用于 Banner、背景视频等 -
object-fit: contain：完整显示，必留白，适合证件照、产品图预览等需保全全部内容的场景 - 若用
cover，建议额外加object-position: center，避免关键内容被边缘裁掉 - 微信 iOS 和部分安卓 WebView 对
object-fit支持不稳定，实测中发现cover比contain兼容性略好
真正容易被忽略的点是：所有这些样式都建立在「移除 <video></video> 内联尺寸」和「容器必须是块级且无固定 height」两个前提之上。漏掉任一，整个比例链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
