我想通过CSS缩放iFrame到宽度: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%;}
注意:这只适用于固定的宽高比。
原文地址:https://www.jb51.cc/css/222463.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。