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

问题

今天分享下”web响应式布局中iframe的自适应方法“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。在响应式布局中，大家应当小心看待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就可以。

复制代码

代码如下:

.wrap{

width: 400px;

margin: auto;

border: 5px solid greenyellow;

}

.iframe-container{

height: 0;

padding-bottom: 97.6%;

position: relative;

}

.iframe-container iframe{

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

}

@media screen and (max-width: 400px) {

.wrap{

width: 300px;

}

}

复制代码

代码如下:

结果显示的状态：

当视口宽度大于400px时：

当视口宽度小于400px时：

总结

以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！