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。