解析web響應式佈局中iframe自適應的方法

問題
在響應式在佈局中，我們應該小心對待iframe元素，iframe元素的width和height屬性設定了其寬度和高度，但是當包含區塊的寬度或高度小於iframe的寬度或高度時，會出現iframe元素溢出的現象：



這樣溢出的iframe會破壞頁面的佈局。讓iframe元素也具有響應性，拭目以待。 container元素來包裹iframe，同時讓iframe-container元素的寬度充滿包含區塊的寬度，並且根據iframe的長寬比，設定iframe-container元素的
padding-bottom
百分比。 #其實，這種方式的精髓就在於設定iframe-container元素的padding-bottom屬性，設定該屬性的目的在於變相的設定元素的高度。言的，如果對height屬性設定百分比，則相對於父元素的height，而父元素的height值我們通常使用預設的auto，因此會出現子元素height也為0.因此，我們只能給padding-bottom設定屬性。 #當視窗寬度大於400px時：

當視窗寬度小於400px時：

#總結

-->


#

以上是解析web響應式佈局中iframe自適應的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！