web相应式布局中iframe自适应的方法

题目
在相应式布局中，我们应该警惕对待iframe元素，iframe元素的width和height属性设置了其宽度和高度，但是当包含块的宽度或高度小于iframe的宽度或高度时，会出现iframe元素溢出的征象：

如许溢出的iframe会破坏页面的布局。我们可以采用一种方法让iframe元素也具有相应性，拭目以待。

解决方法
iframe元素自己并无法伸缩，除非通过js表现的设置其宽度。但是我们可通过一个iframe-container元素来包裹iframe，同时让iframe-container元素的宽度充满包含块的宽度，并且根据iframe的长宽比，设置iframe-container元素的padding-bottom百分比。

其实，这种体例的精髓就在于设置iframe-container元素的padding-bottom属性，设置该属性的目的在于变相的设置元素的高度。由于给padding-bottom设置百分比，是相对于父元素的width而言的，假如对height属性设置百分比，则相对于父元素的height，而父元素的height值我们通常使用默认的auto，因此会出现子元素height也为0.因此，我们只能给padding-bottom设置属性。如许，只需让iframe元素充满iframe-container即可。

效果表现的状况：

当视口宽度大于400px时：

当视口宽度小于400px时：

总结
以上就是这篇文章的悉数内容了，盼望本文的内容对大家的学习或者工作能带来肯定的帮助，假如有疑问大家可以留言交流。