60

我想通过 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>

这适用于图像，但我希望 iFrame 具有相同的行为：

<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% 宽，但不会像图像那样按比例缩放其高度。

4

6 回答 6

116

图像和 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%;}

注意：这只适用于固定的纵横比。

于 2012-08-25T12:24:11.753 回答
65

我想这是一种更清洁的方法。它适用于内联height和width属性（我在小提琴中设置了随机值来证明这一点）和 CSSmax-width属性。

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/

于 2013-11-21T19:20:20.983 回答
23

我最喜欢这个解决方案。简单、可扩展、响应迅速。这里的想法是创建一个高度为零的外部 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%。

于 2015-09-16T21:47:33.853 回答
8

您可以在此处使用视口单位而不是 %。像这样：

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>

于 2015-02-08T10:43:49.227 回答
3

@Anachronist 离这里最近，@Simone 不远。元素上百分比填充的警告是它基于其父级的宽度，因此如果与您的容器不同，则比例将关闭。

最可靠、最简单的答案是：

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>

于 2017-09-18T05:23:57.547 回答
2

在 Weebly “添加您自己的 html” 框中，这些解决方案都不适合我。不知道他们在用他们的代码做什么。但我在https://benmarshall.me/responsive-iframes/找到了这个解决方案， 它运行良好。

CSS

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
  padding-top: 75%;
}

HTML

<div class="iframe-container">
  <iframe src="https://player.vimeo.com/video/106466360" allowfullscreen></iframe>
</div>
于 2020-02-16T15:11:41.567 回答