aspect-ratio不能直接写在或上，因其是替换元素，浏览器按元数据或html属性决定固有尺寸，忽略css声明；必须用外层容器（如div）设置aspect-ratio、width/max-width，并配合object-fit和子元素宽高100%才能生效。
aspect-ratio 能直接固定容器比例，但不能直接写在 <video></video> 或 <img> 上——它对替换元素无效，必须用容器包裹。
为什么直接给 <video></video> 写 aspect-ratio 没反应？
因为 <video></video> 和 <img> 是替换元素（replaced element），浏览器按其元数据或 HTML 属性决定固有尺寸，aspect-ratio 对它们完全被忽略。你写 video { aspect-ratio: 16 / 9; }，浏览器照常渲染默认 inline 尺寸（约 300×150px），加载中会跳动，加载后可能拉伸或塌陷。
常见错误现象：<video></video> 高度为 0、压成一条线、或宽度正常但高度没撑开。
- 必须用
<div class="video-wrapper"> 包一层<li>把 <code>aspect-ratio和width都写在 wrapper 上 - 移除
<video></video>标签上的width和height属性（如width="640" height="360"），否则会覆盖 CSS
aspect-ratio 必须搭配 width 或 max-width 才生效
aspect-ratio 只定义比例，不提供尺寸基准。单独写 aspect-ratio: 16 / 9;，容器可能塌成一条线，或无限拉伸——浏览器根本不知道“宽多少”，就无法算出“高多少”。
✅ 推荐最小组合：
.video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
}
✅ 更稳妥的响应式写法：
.video-wrapper {
max-width: 100%;
aspect-ratio: 16 / 9;
}
- 别同时写
width: 300px和height: 200px——aspect-ratio会被彻底丢弃 - 写了
height: 200px就别加aspect-ratio，两者冲突，浏览器优先用height - 父容器用了
display: flex+align-items: stretch（Flex 默认行为）？子项会被强行撑高，覆盖比例计算；加align-self: center修复
图片和视频内容怎么填满容器不拉伸？
容器比例定了，里面的内容还得“适配到位”，否则还是留白或变形。
对于 <img>：
.img-wrap img {
width: 100%;
height: 100%;
object-fit: cover; /* 或 contain */
display: block;
}
对于 <video></video>：
.video-wrapper video {
width: 100%;
height: 100%;
object-fit: cover; /* 填满裁边；用 contain 则完整居中 */
display: block;
}
- 别在
img或video上再写height: auto—— 它会和height: 100%冲突，旧版 Chrome 可能失效 -
object-fit: cover要生效，前提是父容器有可计算的宽高（比如靠aspect-ratio + width算出来的），否则失去参照系 - 如果图片原始宽高比不确定，别硬写死
aspect-ratio: 16 / 9；服务端返回宽高后，内联写style="aspect-ratio: ${w} / ${h};"更安全
兼容性兜底：Safari 15.4 之前怎么办？
aspect-ratio 在 Safari 15.4（iOS 15.4 / macOS 12.3+）才原生支持，微信 X5 内核、部分安卓 WebView 也不认。必须降级。
最成熟方案是 padding-bottom 技巧：
.wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 → (9÷16)×100% */
}
.wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
- 百分比值 = (高度 ÷ 宽度) × 100%，4:3 是 75%，1:1 是 100%
- 这个技巧下，
<video></video>不可聚焦、不可选中，影响可访问性；需额外加aria-hidden="true"并确保文字替代足够 - 用
@supports (aspect-ratio: 1 / 1)包裹现代写法，再用 fallback 覆盖老浏览器
真正起作用的从来不是单个属性，而是 aspect-ratio 和 width 的绑定关系、容器与子元素的定位协作、以及对替换元素特性的尊重——漏掉任意一环，都会在某个机型上突然塌陷。
