缩放iFrame css宽度100%类似于图像
缩放iFrame css宽度100%类似于图像
提问于 2012-06-20 22:52:56
我想通过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%的宽度，但不像图像那样按比例缩放高度。
回答 5
Stack Overflow用户
发布于 2012-08-25 20:24:12
图像和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%;}注意:这只适用于固定的纵横比。
Stack Overflow用户
发布于 2013-11-22 03:20:21
我想这是一种更干净的方法。它使用内联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%;}Stack Overflow用户
发布于 2015-09-17 05:47:34
我最喜欢这个解决方案。简单，可扩展，响应性强。这里的想法是创建一个零高度的外部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值。4:3宽高比视频为75%，16:9宽高比视频为56.25%。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11122249
复制相关文章
相似问题