javascript - iframe的高度不会根据使用CSS的外部div高度进行调整

我有一个有关调整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>

最佳答案

如果要让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的底部填充即可。

Check this jsfiddle。

Original source。