我想通过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％宽，但不能扩展它的高度比例，如图像一样。
的图像，并且一个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%;}
注意：此功能仅在固定纵横比的作品。
@Rik，我想这是一个更简洁的方法。 它与内联“高度”和“宽度”属性（我在小提琴设定随机值来证明），并用CSS“最大宽度”属性（@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/
我喜欢这个解决方案最好。 简单，可扩展，反应灵敏。 这里的想法是创建具有底部填充设置为视频的纵横比的零高度外层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填充底值。 这对4 75％：3宽高比的视频，以及用于宽屏16 56.25％：9纵横比的视频。
你可以在这里使用的，而不是视％单位。 像这样：
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>
@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>
