aspect-ratio 能替代 padding-bottom 黑魔法，因其是浏览器原生宽高比控制机制，作用于块级容器（如 div）可自动维持比例，无需伪元素或 JS；但不直接支持 video/iframe 等替换元素，须包裹后使用，并配合 width: 100% 和 height: auto 实现响应式缩放。
为什么 aspect-ratio 能替代传统 padding-bottom 黑魔法
因为 aspect-ratio 是浏览器原生支持的宽高比控制机制，它让容器自动维持比例，不再依赖伪元素、padding-top 百分比或 JS 计算。尤其在视频嵌入场景下，iframe 或 video 自身不响应父容器宽高时，靠它能真正解耦布局逻辑。
常见错误是直接给 video 元素设 aspect-ratio——多数浏览器（如 Chrome 114+、Firefox 119+）仍不支持对替换元素（replaced element）生效，必须作用于其**包裹容器**。
- 只对块级容器有效，比如
div、section - 值写成
16 / 9（推荐）或1.777，不要加单位 - 配合
width: 100%和height: auto才能随视口缩放
如何用 aspect-ratio 实现 YouTube/Vimeo 响应式嵌入
第三方视频 iframe 默认不响应，且自身无宽高约束。正确做法是套一层容器，并用 aspect-ratio 锁定比例，再让 iframe 绝对定位填满。
<div class="video-wrapper"> <iframe src="https://www.youtube.com/embed/xxx" frameborder="0" allowfullscreen></iframe> </div>
CSS 写法：
立即学习“前端免费学习笔记（深入）”；
.video-wrapper {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}- 不用再写
padding-bottom: 56.25%+position: absolute的老套路 - 若需适配移动端竖屏，可配合媒体查询改
aspect-ratio: 9 / 16 - 注意 Safari 15.4+ 才完全支持
aspect-ratio，旧版需降级方案（见下一条）
兼容性 fallback：当 Safari 或旧 Edge 不支持 aspect-ratio 时怎么办
不能只靠 @supports 检测，因为部分 Safari 版本（如 15.0–15.3）会误报支持但实际失效。稳妥做法是双轨并行：默认用 padding-bottom，再用 @supports (aspect-ratio: 1) 覆盖。
.video-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 fallback */
}
@supports (aspect-ratio: 1) {
.video-wrapper {
padding-bottom: 0;
aspect-ratio: 16 / 9;
}
}- 不要省略
padding-bottom: 0，否则 fallback 仍生效，覆盖新属性 - 避免用
min-aspect-ratio或max-aspect-ratio，它们兼容性更差，且不适用于全屏播放场景 - 如果项目已用 CSS-in-JS，记得检查其是否转译
@supports规则
自建 video 标签全屏时，aspect-ratio 还管用吗
管用，但仅限「非全屏状态」。一旦触发 video.webkitEnterFullscreen() 或用户点击全屏按钮，浏览器接管渲染，此时 CSS 完全失效——aspect-ratio 对原生全屏无影响，也不该有影响。
真正要关注的是：全屏退出后，容器能否恢复预期比例。这时候容易出问题：
- 某些安卓 WebView 退出全屏后会重置
height为auto，导致容器塌陷 - 解决方法是在
fullscreenchange事件里强制重设容器样式，或用!important锁定aspect-ratio - 若用
object-fit: cover配合video，需确保父容器有明确宽高约束，否则aspect-ratio可能被忽略
复杂点在于，全屏行为本身由 UA 控制，CSS 能做的只是铺好退出后的“地基”。别指望靠一个属性搞定从嵌入到全屏再到退出的全部链路。
