视频铺满页面解决方案

场景是视频铺满模块作为背景展示。常规的样式 video 标签很难被拉伸压缩，所以会导致有很多留黑留白的现象。而 CSS3 中有一个属性可以完美解决此问题。object-fit，当设置 下面的属性时可以完美的占满整个模块而不出现黑色区域。

object-position: center;
object-fit: cover;

但是 object-fit 的兼容性也完美的避开了 IE，任何版本的 IE 浏览器都不兼容。Edge 下也不支持。如果不需要处理IE还是非常好的一个解决方法，另外这里有一个 polyfill，大家可以去尝试下。

另一种解决方案比较兼容，支持IE，方法如下

width: auto;
height: auto;
min-height: 100%;
min-width: 100%;
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, 0);

亲测 IE、Edge 有效，完美兼容

来源：CSDN

作者：安然lw

链接：https://blog.csdn.net/qq_25243451/article/details/104563706