像图像一样缩放iFrame css宽度100％
我想通过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>
这在图像上效果很好，但我想为iFrames的行为：
<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，我想这是一个更清洁的方法。 它与内联“高度”和“宽度”属性（我设置随机值在小提琴certificate），并与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%;}
我最喜欢这个解决scheme。 简单，可扩展，响应。 这里的想法是创build一个零高度的外部div与底部填充设置为video的高宽比。 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>
这里唯一的variables是外部div中的填充底部值。 宽高比为4：3的video为75％，宽屏为16：9的video为56.25％。
您可以在这里使用视口单位而不是％。 喜欢这个：
iframe { max-width: 100vw; max-height: 56.25vw; /* height/width ratio = 315/560 = .5625 */ }
DEMO （resize以查看效果）
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离这里最近，@西蒙并不遥远。 在元素上填充百分比的警告是它基于父元素的宽度，所以如果与你的容器不同，比例将被closures。
最可靠，最简单的答案是：
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>
我知道它有点晚了，但是我创build了一个脚本来帮助按照您所描述的将内联框架按其父宽度的100％进行缩放。 https://github.com/LasseHaslev/iframe-scaler
