首页 文章

像图像一样缩放iFrame css宽度100%

提问于
浏览
50

我想通过CSS将iFrame缩放到 width: 100% ,高度应按比例缩放到宽度 .

使用 <img> 标签可以正常工作 .

图像和iFrame都在html中定义了宽度和高度 .

这里有一些例子:

<html>
    <style>
        #a{ width: 500px; }
        img{ width: 100%; height: auto }
    </style>
    <body>
        <div id="a">
            <img src="http://lorempixel.com/200/150/" width="200" height="150" />
        </div>
    </body>

这对图像效果很好,但我想对iFrames采取相同的行为:

<html>
    <style>
        #a{ width: 900px; background: grey;}
        iframe{ width: 100%; height: auto }
    </style>
    <body>
        <div id="a">
            <iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen></iframe>
        </div>
    </body>

iFrame渲染100%宽,但不像图像那样按比例缩放高度 .

5 回答

  • 10

    图像和iframe之间的巨大差异在于图像保持其宽高比 . 您可以将图片和iframe合并,从而生成响应式iframe . 希望这回答你的问题 .

    检查此链接,例如:http://jsfiddle.net/Masau/7WRHM/

    HTML:

    <div class="wrapper">
        <div class="h_iframe">
            <!-- a transparent image is preferable -->
            <img class="ratio" src="http://placehold.it/16x9"/>
            <iframe src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
        </div>
        <p>Please scale the "result" window to notice the effect.</p>
    </div>
    

    CSS:

    html,body        {height:100%;}
    .wrapper         {width:80%;height:100%;margin:0 auto;background:#CCC}
    .h_iframe        {position:relative;}
    .h_iframe .ratio {display:block;width:100%;height:auto;}
    .h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
    

    注意:这仅适用于固定的宽高比 .

  • 108

    @Rik,我想这是一种更清洁的方法 . 它适用于内联'高度'和'宽度'属性(我在小提琴中设置随机值来证明这一点)和CSS'max-width'属性(@Walf你读过我吗?) .

    HTML:

    <div class="wrapper">
        <div class="h_iframe">
            <iframe height="2" width="2" src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
        </div>
        <p>Please scale the "result" window to notice the effect.</p>
    </div>
    

    CSS:

    html,body        {height: 100%;}
    .wrapper         {width: 80%; max-width: 600px; height: 100%; margin: 0 auto; background: #CCC}
    .h_iframe        {position: relative; padding-top: 56%;}
    .h_iframe iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
    

    http://jsfiddle.net/7WRHM/1001/

  • 54

    我最喜欢这个解决方案 . 简单,可扩展,响应迅速 . 这里的想法是创建一个零高度外部div,底部填充设置为视频的宽高比 . iframe的宽度和高度均缩放至100%,完全填充外部容器 . 外部容器根据其宽度自动调整其高度,内部的iframe相应地调整自身 .

    <div style="position:relative; width:100%; height:0px; padding-bottom:56.25%;">
        <iframe style="position:absolute; left:0; top:0; width:100%; height:100%"
            src="http://www.youtube.com/embed/RksyMaJiD8Y">
        </iframe>
    </div>
    

    这里唯一的变量是外部div中的padding-bottom值 . 4:3宽高比视频为75%,宽屏16:9宽高比视频为56.25% .

  • 3

    您可以在此处使用视口单元而不是% . 像这样:

    iframe {
        max-width: 100vw;
        max-height: 56.25vw; /* height/width ratio = 315/560 = .5625 */
    }
    

    DEMO(调整大小以查看效果)

    body {
      margin: 0;
    }
    .a {
      max-width: 560px;
      background: grey;
    }
    img {
      width: 100%;
      height: auto
    }
    iframe {
      max-width: 100vw;
      max-height: 56.25vw;
      /* 315/560 = .5625 */
    }
    
    <div class="a">
      <img src="http://lorempixel.com/560/315/" width="560" height="315" />
    </div>
    
    <div class="a">
      <iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen></iframe>
    </div>
    
  • 4

    @Anachronist离这儿最近,@西蒙不远 . 在元素上使用百分比填充的警告是它基于父元素的宽度,因此如果与容器不同,则比例将关闭 .

    最可靠,最简单的答案是:

    body {
      /* for demo */
      background: lightgray;
    }
    .fixed-aspect-wrapper {
      /* anything or nothing, it doesn't matter */
      width: 60%;
      /* only need if other rulesets give this padding */
      padding: 0;
    }
    .fixed-aspect-padder {
      height: 0;
      /* last padding dimension is (100 * height / width) of item to be scaled */
      padding: 0 0 56.25%;
      position: relative;
      /* only need next 2 rules if other rulesets change these */
      margin: 0;
      width: auto;
    }
    .whatever-needs-the-fixed-aspect {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* for demo */
      border: 0;
      background: white;
    }
    
    <div class="fixed-aspect-wrapper">
      <div class="fixed-aspect-padder">
        <iframe class="whatever-needs-the-fixed-aspect" src="/"></iframe>
      </div>
    </div>
    

相关问题