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

Posted 2023-03-06

技术标签:

【中文标题】像图像一样缩放 iFrame css 宽度 100%【英文标题】：Scale iFrame css width 100% like an image 【发布时间】：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/"   />
        </div>
    </body>

这在图像上效果很好，但我希望 iFrame 具有相同的行为：

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

iFrame 呈现 100% 宽，但不会像图像那样按比例缩放其高度。

【问题讨论】：

到目前为止你有什么？你能做一个jsfiddle吗？让我们看看你的代码。 【参考方案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   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/"   />
</div>

<div class="a">
  <iframe   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； // 背景颜色：浅青色；

以上是关于像图像一样缩放 iFrame css 宽度 100%的主要内容，如果未能解决你的问题，请参考以下文章

CSS背景图像以适应宽度，高度应按比例自动缩放

如何使我的徽标 JS 动画像网站上的图像徽标一样缩放？

像背景大小一样缩放和重新定位 iframe：封面

为响应式设计缩放 iframe 仅 CSS

css 在iOS上修复100％宽度的iframe