iframe 的高度不会根据使用 CSS 的外部 div 高度调整大小答案

【问题标题】：height of iframe doesn't resize based on outer div height using CSSiframe 的高度不会根据使用 CSS 的外部 div 高度调整大小
【发布时间】：2016-01-14 09:25:06
【问题描述】：

我有一个关于调整 iframe 内容大小的一般性问题。我观察到，如果我更改包含 iframe 的外部 div 的宽度，则 iframe 内容会根据外部 div 宽度规范进行调整。对于 height 属性，情况并非如此。有人可以向我解释或指导更多吗？

通过改变 height 和 width 属性值，我的意思是用百分比而不是像素值来指定高度和宽度。

例子：

<div style="width:100%;height:100%"> <iframe style="width:100%;height:100%" src="http://www.gizmodo.com"></iframe> </div>

【问题讨论】：

标签： javascript html css iframe

【解决方案1】：

如果你想让你的 iframe 响应宽度变化并保持比例，你必须使用像这样填充的包装 div 的纵横比：

HTML

<div class="wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/qajXpi048nE" frameborder="0" allowfullscreen></iframe>

CSS

.wrapper {
  position: relative;
  padding-bottom: 56.25%;
}
.wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

因此，要指定 iframe 的宽度和高度，您只需要使用包装 div 的 padding-bottom。

Check this jsfiddle.

Original source.

【讨论】：

您已将宽度和高度的固定值作为 iframe 属性。我可以知道这是为什么吗？
我只是从 YouTube 的共享字段中复制了代码，以表明它真的没关系。这些值真的不重要，你甚至可以删除它们。在此配置中确定 iframe 尺寸的唯一值是包装器的 padding-bottom。它之所以有效，是因为 iframe 被拉伸以占据整个父级。
这就是问题的重点。我想知道我们是否可以根据父级调整大小使 iframe 缩放。 iframe 确实完全占据了父级，但是如果父级的高度发生变化，那么 iframe 内容会相应地缩放到父级吗？