zoukankan      html  css  js  c++  java
  • 响应式web布局中iframe的自适应

    困境

              在响应式布局中,我们应该小心对待iframe元素,iframe元素的width和height属性设置了其宽度和高度,但是当包含块的宽度或高度小于iframe的宽度或高度时,会出现iframe元素溢出的现象:图像 1

    这样溢出的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- 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时:

    图像 2

    当视口宽度小于400px时:

    图像 3

  • 相关阅读:
    转 GFlags 使用详解
    printf 格式输出
    XCODE unknown type name __declspec 错误的解决方法
    Boost提示'cl' 不是内部或外部命令,也不是可运行的程序 或批处理文件
    DOLServer
    游戏AI的开发框架组件 behaviac
    mongodb 数据导入和导出
    Makefile经典教程
    g++ 编译动态链接库和静态链接库
    excel 公式
  • 原文地址:https://www.cnblogs.com/accordion/p/4347330.html
Copyright © 2011-2022 走看看