我想通过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 回答
图像和iframe之间的巨大差异在于图像保持其宽高比 . 您可以将图片和iframe合并,从而生成响应式iframe . 希望这回答你的问题 .
检查此链接,例如:http://jsfiddle.net/Masau/7WRHM/
HTML:
CSS:
注意:这仅适用于固定的宽高比 .
@Rik,我想这是一种更清洁的方法 . 它适用于内联'高度'和'宽度'属性(我在小提琴中设置随机值来证明这一点)和CSS'max-width'属性(@Walf你读过我吗?) .
HTML:
CSS:
http://jsfiddle.net/7WRHM/1001/
我最喜欢这个解决方案 . 简单,可扩展,响应迅速 . 这里的想法是创建一个零高度外部div,底部填充设置为视频的宽高比 . iframe的宽度和高度均缩放至100%,完全填充外部容器 . 外部容器根据其宽度自动调整其高度,内部的iframe相应地调整自身 .
这里唯一的变量是外部div中的padding-bottom值 . 4:3宽高比视频为75%,宽屏16:9宽高比视频为56.25% .
您可以在此处使用视口单元而不是% . 像这样:
DEMO(调整大小以查看效果)
@Anachronist离这儿最近,@西蒙不远 . 在元素上使用百分比填充的警告是它基于父元素的宽度,因此如果与容器不同,则比例将关闭 .
最可靠,最简单的答案是: