web回应式合理布局中iframe自融入的方式

难题
在回应式合理布局中,大家应当当心对待iframe元素,iframe元素的width和height特性设定了其宽度和高宽比,可是当包括块的宽度或高宽比小于iframe的宽度或高宽比时,会出現iframe元素外溢的状况:

这样外溢的iframe会破坏网页页面的合理布局。大家能够选用1种方式让iframe元素也具备回应性,翘首以待。

处理方式
iframe元素自身并没有法伸缩,除非根据js显示信息的设定其宽度。可是大家可根据1个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时:

总结
以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,假如有疑惑大伙儿能够留言沟通交流。