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

【问题标题】：Scale iFrame css width 100% like an image像图像一样缩放 iFrame css 宽度 100%
【发布时间】：2012-06-22 17:57:58
【问题描述】：

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

【问题讨论】：

到目前为止你有什么？你能做一个jsfiddle吗？让我们看看你的代码。

标签： css iframe responsive-design

【解决方案1】：

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

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

【讨论】：

另外请注意，图像不是必需的（至少在现代浏览器中）。 padding-top（将填充设置为纵横比）技巧有效：
@ansiart 如果您需要设置max-width，则您的填充顶部技巧不起作用。另外，您在容器上忘记了position:relative。
哎呀。感谢那。让我摆脱了尝试在移动版本的网站上动态调整 iFrame 的大小。投票：赞成 :)
呃..我们过去使用透明图像进行布局，继续滚动，因为 Simone Lazzari 的答案是优越的！
无图片请求同理：使用内联SVG：<svg xmlns="http://www.w3.org/2000/svg" style="width:100%;" viewBox="0 0 500 60"></svg>

【解决方案2】：

我想这是一种更清洁的方法。它适用于内联 height 和 width 属性（我在小提琴中设置了随机值来证明这一点）和 CSS max-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/

【讨论】：

我想为这个答案增加一些可见性，因为它似乎是一个明显的赢家。先前涉及添加隐藏 img 以触发缩放的答案很聪明，但强制额外的 http 请求，特别是在移动设备上，远非理想。这个纯 CSS 答案是一种更好的方法。
padding-top 应为 56.25% 或视频宽于 16/9
@Simone，题外话，但我个人更喜欢仅使用 css 的方法。一个很好的阅读是：alistapart.com/article/creating-intrinsic-ratios-for-video 对于 IE7 支持检查 alistapart.com/d/creating-intrinsic-ratios-for-video/…

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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>

【讨论】：

你好，我认为大众不适合这个。 jsfiddle.net/bancaf/615y5aou 在这里，在基于您的代码的简化示例中，iframe 高度保持锁定为默认 150 像素（我认为 iframe 的浏览器默认最小高度）。我错过了什么？
这个解决方案非常棒，因为它不需要 HTML 有任何额外的标签，并且不涉及 JavaScript。

【解决方案5】：

@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>

【讨论】：

【解决方案6】：

在 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>

【讨论】：

这不仅对我有用......而且我还能够在它周围添加一个额外的包装 div，以便我可以替换标准 Angular Material Mat-Card 中的和它像一样填满整个空间，而不必用他们的标准设置到处乱逛！谢谢！ .MatCardVid { 位置：相对；左：-16px；宽度：计算（100% + 32px）；边距底部：20px； // 背景颜色：浅青色； }