iframe长宽比需容器控制，现代浏览器用aspect-ratio:16/9+width:100%+height:auto；老浏览器用padding-bottom+绝对定位；务必清除内联宽高属性并验证实际比例。
iframe 本身不支持直接设长宽比，必须靠容器控制比例；只写 width="100%" 或加 height="360" 都会失效。
用 aspect-ratio: 16 / 9 最简方案（现代浏览器）
在支持 CSS aspect-ratio 的浏览器（Chrome 88+、Firefox 89+、Safari 15.4+、Edge 91+）中，一行样式就能搞定：
iframe {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
注意：height: auto 必须写，否则 aspect-ratio 不生效；width: 100% 保证宽度随父容器变化，高度由浏览器自动按比例计算。
- 不需外层
div包裹，直接作用于iframe元素即可 - 如果 iframe 有内联
width或height属性（如width="640" height="360"），建议删掉——CSS 会覆盖它们，但残留属性可能干扰调试 - Safari 15.3 及更早版本不支持，上线前需查目标用户浏览器分布
用 padding-bottom 实现全兼容方案
当需要支持老版 Safari、部分 Android WebView 或企业内网 IE 兼容模式时，必须用 padding 技巧。核心是：让容器“自己撑开高度”，再把 iframe 绝对定位填满。
- 外层容器设
position: relative、height: 0、padding-bottom: 56.25%（因为 9 ÷ 16 = 0.5625） - iframe 移除所有
width和heightHTML 属性，CSS 设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 务必删掉 iframe 上的
height="360"等内联属性，否则会破坏 padding 计算逻辑
示例结构：
<div style="position: relative; height: 0; padding-bottom: 56.25%;"> <iframe src="https://www.youtube.com/embed/xxx" frameborder="0" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"> </iframe> </div>
为什么 height="100%" 总是不生效
常见错误是给 iframe 写 height="100%" 或 style="height: 100%"，结果高度为 0 或整个区域消失。
- 因为
height: 100%要求父元素有明确可计算的高度，而响应式容器（如仅设width: 100%的div）自身高度是 0 - padding-bottom 百分比能生效，是因为它的计算基准是父容器宽度，不是高度
- 如果你看到 iframe 在小屏上被压扁或横向溢出，大概率是忘了清空内联
height属性，或容器没设position: relative
地图和视频 iframe 的比例微调
虽然 YouTube、Bilibili 默认适配 16:9，但百度地图、高德地图嵌入代码常默认 4:3（padding-bottom: 75%）或自定义比例（如 21:9 → padding-bottom: 42.85%）。
- 先打开开发者工具，看 iframe 内容实际渲染区域的宽高像素，算出真实比例（如 800×300 → 8:3 →
padding-bottom: 37.5%） - 不要盲目套用 56.25%，尤其嵌入地图时控件错位、缩放按钮挤出边界，基本就是比例设错了
- 若用
aspect-ratio，同样要按实际内容比例写，比如aspect-ratio: 4 / 3
真正卡住人的地方从来不是“怎么写”，而是删不干净的内联 height 属性、漏掉的 position: relative、以及把比例值当成魔法数字硬套——它得是你量出来的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
