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

Question

我有关于调整iframe内容大小的常见问题。 我观察到，如果我更改包含iframe的外部div的宽度，则iframe内容会根据外部div宽度规范进行调整。高度属性不一定适用。有人可以向我解释或引导更多这方面的信息吗？

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

例子：

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

Answer 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的填充底。

Check this jsfiddle。

Original source。