像图像一样缩放 iFrame css 宽度 100% [英] Scale iFrame css width 100% like an image
问题描述
我想通过 CSS 将 iFrame 缩放到 width: 100%，并且高度应该与宽度成比例.
使用 标签可以正常工作.
图像和 iFrame 都在 html 中定义了宽度和高度.
这里有一些例子:
<风格>#a{ 宽度:500px;}img{ 宽度:100%;高度:自动 }</风格><身体><div id="a"><img src="http://lorempixel.com/200/150/" width="200" height="150"/>这在图像上效果很好，但我希望 iFrame 具有相同的行为:
<风格>#a{ 宽度:900px;背景:灰色；}iframe{ 宽度:100%；高度:自动 }</风格><身体><div id="a"><iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen></iframe>iFrame 呈现 100% 的宽度，但不会像图像那样按高度比例缩放.
图像和 iframe 之间的巨大区别在于图像保持其纵横比.您可以将图像和 iframe 结合起来，从而产生响应式 iframe.希望这能回答您的问题.
例如检查此链接:http://jsfiddle.net/Masau/7WRHM/
HTML:
<div class="h_iframe"><!-- 最好使用透明图像--><img class="ratio" src="http://placehold.it/16x9"/><iframe src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe><p>请缩放结果"窗口以注意效果.</p>
CSS:
html,body {height:100%;}.wrapper {width:80%;height:100%;margin:0 auto;background:#CCC}.h_iframe {位置:相对；}.h_iframe .ratio {display:block;width:100%;height:auto;}.h_iframe iframe {position:absolute;top:0;left:0;width:100%;高度:100%;}注意:这只适用于固定的纵横比.
I want to scale an iFrame through CSS to width: 100%, and the height should scale proportionally to the width.
With an <img> tag this works fine.
Both the image and the iFrame have defined width and height in the 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:
<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.
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.
Check this link for example : 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%;}
note: This only works with a fixed aspect-ratio.
这篇关于像图像一样缩放 iFrame css 宽度 100%的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
