像图像一样缩放 iFrame css 宽度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11122249/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scale iFrame css width 100% like an image
提问by Oliver
I want to scale an iFrame through CSS to width: 100%, and the height should scale proportionally to the width.
我想通过 CSS 将 iFrame 缩放到width: 100%，并且高度应与宽度成比例地缩放。
With an <img>tag this works fine.
使用<img>标签可以正常工作。
Both the image and the iFrame have defined width and height in the html.
图像和 iFrame 都在 html 中定义了宽度和高度。
Here some examples:
这里有一些例子：
<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>
This works great on images, but I would like the same behaviour for iFrames:
这在图像上效果很好，但我希望 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>
The iFrame renders 100% wide but does not scale it's height proportional like the image does.
iFrame 呈现 100% 宽，但不会像图像那样按高度比例缩放。
回答by Rik
Big difference between an image and an iframe is the fact that an image keeps its aspect-ratio. You could combine an image and an iframe with will result in a responsive iframe. Hope this answerers your question.
图像和 iframe 之间的巨大区别在于图像保持其纵横比。您可以将图像和 iframe 组合在一起，从而产生响应式 iframe。希望这能回答你的问题。
Check this link for example : http://jsfiddle.net/Masau/7WRHM/
检查此链接，例如：http: //jsfiddle.net/Masau/7WRHM/
HTML:
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:
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%;}
note: This only works with a fixed aspect-ratio.
注意：这只适用于固定的纵横比。
回答by Simone Lazzari
@Rik, I suppose this is a cleaner approach. It works with inline 'height' and 'width' properties (I set random value in the fiddle to prove that) and with CSS 'max-width' property (@Walf do you read me?).
@Rik，我想这是一种更清洁的方法。它适用于内联的“高度”和“宽度”属性（我在小提琴中设置了随机值来证明这一点）和 CSS 的“最大宽度”属性（@Walf，你读懂了吗？）。
HTML:
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:
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%;}
回答by Anachronist
I like this solution best. Simple, scalable, responsive. The idea here is to create a zero-height outer div with bottom padding set to the aspect ratio of the video. The iframe is scaled to 100% in both width and height, completely filling the outer container. The outer container automatically adjusts its height according to its width, and the iframe inside adjusts itself accordingly.
我最喜欢这个解决方案。简单、可扩展、响应迅速。这里的想法是创建一个零高度的外部 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>
The only variable here is the padding-bottom value in the outer div. It's 75% for 4:3 aspect ratio videos, and 56.25% for widescreen 16:9 aspect ratio videos.
这里唯一的变量是外部 div 中的 padding-bottom 值。4:3 宽高比视频为 75%，宽屏 16:9 宽高比视频为 56.25%。
回答by Danield
You could use viewport units here instead of %. Like this:
您可以在此处使用视口单位而不是 %。像这样：
iframe {
max-width: 100vw;
max-height: 56.25vw; /* height/width ratio = 315/560 = .5625 */
}
DEMO(Resize to see the effect)
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>回答by Walf
@Anachronist is closest here, @Simone not far off. The caveat with percentage padding on an element is that it's based on its parent'swidth, so if different to your container, the proportions will be off.
@Anachronist 离这里最近，@Simone 离这里不远。元素上填充百分比的警告是它基于其父元素的宽度，因此如果与您的容器不同，比例将会关闭。
The most reliable, simplest answer is:
最可靠、最简单的答案是：
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>回答by spencersnygg
None of these solutions worked for me inside a Weebly "add your own html" box. Not sure what they are doing with their code. But I found this solution at https://benmarshall.me/responsive-iframes/and it works perfectly.
这些解决方案都不适用于 Weebly 的“添加您自己的 html”框。不确定他们在用他们的代码做什么。但我在https://benmarshall.me/responsive-iframes/找到了这个解决方案， 它运行良好。
CSS
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
HTML
<div class="iframe-container">
<iframe src="https://player.vimeo.com/video/106466360" allowfullscreen></iframe>
</div>
