专栏首页前端杂货铺响应式web布局中iframe的自适应

响应式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="http://player.youku.com/embed/XOTE0MjkyODgw" frameborder=0 allowfullscreen></iframe>
        </div>
    </div>

结果显示的状态:

当视口宽度大于400px时:

当视口宽度小于400px时:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • table-cell实现宽度自适应布局

    利用table-cell可以实现宽度自适应布局。 table-cell有一些比较好用的属性,比如垂直居中,自适应高度宽度等,为元素设置table-cell布局之...

    欲休
  • iframe编程的一些问题

    前几天做一个用iframe显示曲线图的demo,发现对iframe的contentDocument绑定 onclick事件都无效,而在页面中对iframe.co...

    欲休
  • node.js与ThreadLocal

    ThreadLocal变量的说法来自于Java,这是在多线程模型下出现并发问题的一种解决方案。 ThreadLocal变量作为线程内的局部变量,在多线程下可以...

    欲休
  • iframe 解析

    简介:iframe在日常的开发中经常用到,本随笔在参考http://blog.csdn.net/cuew1987/article/details/1126515...

    郑小超.
  • 根据获取内部元素的高度,设置iframe的高度

    德顺
  • 动态创建iframe标签页并监控其加载成功(onload)的事件

    Jerry Wang
  • 深入理解iframe

    iframe 用于在页面内显示页面,使用 <iframe> 会创建包含另外一个文档的内联框架(即行内框架)

    Leophen
  • 真正解决iframe高度自适应问题

    拿到这个对象,就可以根据正常网页的方法拿到嵌入(子)网页的文档高度,然后把值附给父页面的iframe的height。

    yuezhongbao
  • weaver_oa

    landv
  • 另类SEO分享:利用JS封装iframe躲过搜索引擎的抓取

    前言:很多博友不仔细看完内容就直接认为用 iframe 不好之类的云云,而实际上本文就是教你在必须使用 iframe 的时候,该如何躲过搜索引擎的抓取,避免不利...

    张戈

扫码关注云+社区

领取腾讯云代金券