css小技巧:巧用padding实现iframe等比例缩放

我们经常会遇到需要将其他视频网站上的视频插入到自己的页面中,从视频网站上获取的代码是固定宽高的iframe,如果自己的页面是响应式的,如何将iframe适配到各个设备成了问题。网上有很多使用js动态设置高度来实现,而一向坚持“能够使用css实现的就不去写js”原则的我,发现了一种巧妙的方法解决这个问题。

问题来源

iframe作为一种内联框架,经常用于在页面中嵌套另一个页面或多媒体文件。iframe标签要定高度才能撑开,高度写死适配又会出现各种问题。拿使用较多的插入视频为例,高度太高,上下会出现黑边。高度太低,播放时左右又会有黑边。

一般我们从视频网站粘贴过来的代码如下:

1
<iframe width="560" height="280" src="https://www.youtube.com/embed/Um7pMggPnug" frameborder="0" allowfullscreen></iframe>

解决方案

巧用padding的百分比来解决问题。

在iframe外层嵌套一层div,宽度根据页面布局设置,此例中估且设为100%全屏,高度设为0,使用padding撑开盒子高度。padding值根据视频宽高比例进行设置。最后设置iframe为绝对定位铺满全屏即可。

1
2
3
<div class="video">
<iframe src="https://www.youtube.com/embed/Um7pMggPnug" frameborder="0" allowfullscreen></iframe>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.video{
position:relative;
width:100%;
height:0;
padding-bottom:56.25%;
}
.video iframe{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}

原理解析

重点:当padding/margin取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!

结束语: 小小css能够简单实现多行js代码中才能够完成的效果,在工作学习中千万不可忽略css的大作用。

竹风原创,欢迎交流学习。转载请附上本文链接,谢谢!

最后更新:

原始链接: http://wangzc.cc/blog/skills-iframe/