保持iframe宽高比
内容提要
本文讨论了如何在HTML中使用iframe保持宽高比并响应不同窗口尺寸。通过将iframe包裹在一个div中，并使用相对定位和padding-bottom属性，可以实现这一目标。示例中，padding-bottom的值为68.57%，是根据原始宽高比计算得出的。
延伸解读
固定尺寸与响应式的矛盾
文章指出，Internet Archive 为游戏 Dyna Blaster 生成的 iframe 代码使用固定宽高（560px 和 384px），这导致 iframe 无法适应不同窗口尺寸。若改为百分比宽高（如 100%），虽然能响应窗口变化，但会破坏原始宽高比，造成画面拉伸或变形。因此，需要一种既能响应式缩放又能保持宽高比的方案。
包裹容器与 padding-bottom 技巧
解决方案是将 iframe 包裹在一个 div 中，并设置 div 的 position 为 relative，同时使用 padding-bottom 属性。padding-bottom 的百分比值基于容器宽度计算，从而创建一个具有固定宽高比的占位区域。然后，将 iframe 设置为绝对定位，并让宽高均为 100%，使其填充整个容器。这样，iframe 就能随容器缩放而保持比例。
padding-bottom 值的计算方法
文章中的示例使用 padding-bottom: 68.57%，这个值是根据原始 iframe 的宽高比计算得出的。具体来说，68.57% = 384 / 560，即高度除以宽度再乘以 100%。因此，对于任何具有固定宽高比的 iframe，都可以用相同方法计算 padding-bottom 的百分比值，从而在响应式布局中精确保持原始比例。
Q&A
如何在HTML中保持iframe的宽高比？
可以将iframe包裹在一个div中，并使用相对定位和padding-bottom属性来保持宽高比。
为什么iframe需要保持宽高比？
保持宽高比可以确保在不同窗口尺寸下，iframe内容不会失真，适合游戏和视频播放等场景。
padding-bottom属性在保持iframe宽高比中起什么作用？
padding-bottom属性用于设置div的高度比例，从而保持iframe的宽高比，示例中为68.57%。
如何计算padding-bottom的值？
padding-bottom的值是根据iframe的原始宽高比计算得出的，例如384/560得出68.57%。
使用iframe时有哪些常见的应用场景？
iframe常用于嵌入游戏和视频播放等场景。
如何使iframe在不同窗口尺寸下响应？
可以将iframe的宽度和高度设置为100%，并包裹在一个具有相对定位的div中。
