Oli*_*ver 52 css iframe responsive-design
我想通过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%宽,但不像图像那样按比例缩放高度.
Rik*_*Rik 111
图像和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%;}
注意:这仅适用于固定的宽高比.
Sim*_*ari 56
@Rik,我想这是一种更清洁的方法.它适用于内联'高度'和'宽度'属性(我在小提琴中设置随机值来证明这一点)和CSS'max-width'属性(@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%;}
http://jsfiddle.net/7WRHM/1001/
Ana*_*ist 14
我最喜欢这个解决方案.简单,可扩展,响应迅速.这里的想法是创建一个零高度外部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-bottom值.4:3宽高比视频为75%,宽屏16:9宽高比视频为56.25%.
您可以在此处使用视口单位而不是 %。像这样：
iframe {
max-width: 100vw;
max-height: 56.25vw; /* height/width ratio = 315/560 = .5625 */
}
iframe {
max-width: 100vw;
max-height: 56.25vw; /* height/width ratio = 315/560 = .5625 */
}
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 */
}| 归档时间： |
|
| 查看次数： |
137784 次 |
| 最近记录： |