微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

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

2016-07-22 19:42 伯乐专栏\/欲休

(点击上方公众号,可快速关注)

作者:伯乐在线专栏作者 - 欲休

链接:http://web.jobbole.com/86986/

点击 → 了解如何加入专栏作者


困境


在响应式布局中,我们应该小心对待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="http://player.youku.com/embed/XOTE0MjkyODgw" frameborder="0" allowfullscreen=""></iframe>

    </div>

</div>


结果显示的状态:


当视口宽度大于400px时:



当视口宽度小于400px时:



专栏作者简介 ( 点击 → 加入专栏作者 


欲休:前端自由人


打赏支持作者写出更多好文章,谢谢!



【今日微信公号推荐↓】

更多推荐请看值得关注的技术和设计公众号


其中推荐了包括技术设计极客 和 IT相亲相关的热门公众号。技术涵盖:Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《值得关注的技术和设计公众号》,发现精彩!


 
前端大全 更多文章 Medium 的 CSS 方案简直完美 前端开发者不得不知的ES6十大特性 移动端开发的一些技巧 瞅瞅Facebook是怎么保证CSS代码质量的 我的前端之路
猜您喜欢 实现云连接,靠谱的GRE隧道技术必须具备哪些特征? 从人性解读:你为什么转发朋友圈 QTest团建的那些事儿 Python的控制语句 2015,老板挺住,中国挺住啊!