您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 移动前端 >> 浏览设计教程

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即可。

复制代码
代码如下:

.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;
}
}


复制代码
代码如下:

<div class="wrap">
<div class="iframe-container">
<iframe height=498 width=510 src="<a href="http://player.youku.com/embed/XOTE0MjkyODgw">http://player.youku.com/embed/XOTE0MjkyODgw</a>" frameborder=0 allowfullscreen></iframe>
</div>
</div>

效果表现的状况:

当视口宽度大于400px时:

当视口宽度小于400px时:

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

[教程作者:royalrover]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/Tutorial/wd3337.html
div宽度设置width100%后再设置padding或margin超出父元素的解决办法
Html中使用自定义图片来实现checkbox表现的方法
图趣网微信
建议反馈