Scale iFrame css width 100％like a image [英] Scale iFrame css width 100% like an image
问题描述
我想通过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 =200height =150/>
< / div>
< / body>
这在图片上效果很好，但我想对iFrames使用相同的行为：
< html>
< style>
#a {width：900px; background：gray;}
iframe {width：100％; height：auto}
< / style>
< body>
< div id =a>
< iframe width =560height =315src =http://www.youtube.com/embed/RksyMaJiD8Yframeborder =0allowfullscreen>< / iframe>
< / div>
< / body>
iFrame呈现100％宽，但不像图像那样按比例缩放。 >
图像和iframe之间的巨大差异是图像保持其纵横比的事实。您可以组合图像和iframe，将产生响应的iframe。
希望此回答者回答您的问题。
请检查此链接，例如： http://jsfiddle.net/Masau/7WRHM/
HTML：
< div class =wrapper>
< div class =h_iframe>
<！ - 优选透明图像 - >
< img class =ratiosrc =http://placehold.it/16x9/>
< iframe src =http://www.youtube.com/embed/WsFWhL4Y84Yframeborder =0allowfullscreen>< / iframe>
< / div>
< p>请缩放结果窗口以注意效果。< / p>
< / div>
CSS：
code> 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％;}
注意：这只适用于固定的宽高比。 >
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.
这篇关于Scale iFrame css width 100％like a image的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
