如何实现iframe及其内容随父元素尺寸自适应缩放

嗨，我来帮你搞定这个iframe自适应的问题！你需要的是让固定宽高的iframe跟着父容器#outer动态缩放，同时保持内容的比例不变，下面给你两种实用的解决方案：

方法一：兼容性拉满的经典方案（适合所有浏览器） #

这个方法用padding的百分比特性来维持宽高比，是多年来的经典玩法。首先咱们调整一下HTML结构，给iframe套个容器来控制比例：

<div id="outer">
  <div class="iframe-wrapper">
    <iframe id="inner" src="https://lowresnx.inutilis.com/player.php"></iframe>
  </div>
</div>

然后写对应的CSS：

#outer {
  /* 这里可以自定义父容器的尺寸规则，比如占满可用宽度，或者限制最大宽度 */
  width: 100%;
  max-width: 800px; /* 可选，防止iframe太宽 */
  margin: 0 auto; /* 可选，让父容器居中 */
}

.iframe-wrapper {
  position: relative;
  width: 100%;
  /* 计算原iframe的宽高比：512/640 = 0.8 → 80%，用padding-top来撑开高度 */
  padding-top: 80%;
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; /* 可选，去掉iframe默认的边框 */
}

原理很简单：padding-top的百分比是基于父元素宽度计算的，所以容器高度会跟着宽度自动变化，完美维持原比例；然后iframe绝对定位占满容器，自然就跟着父容器缩放了。

方法二：现代浏览器的简洁方案 #

如果你的项目只需要兼容现代浏览器（Chrome、Firefox、Edge等），可以用CSS3的aspect-ratio属性，代码简洁到爆：

<div id="outer">
  <iframe id="inner" src="https://lowresnx.inutilis.com/player.php"></iframe>
</div>

#outer {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

#inner {
  width: 100%;
  /* 直接设置原iframe的宽高比就行 */
  aspect-ratio: 640 / 512;
  border: none;
}

直接给iframe设置宽高比，再让宽度占满父容器，它就会自动计算高度，完全不用额外的嵌套容器，省心又省力！

两种方法都能实现你要的效果，根据你的兼容性需求选就行~

内容来源于stack exchange