视频铺满页面解决方案

场景是视频铺满模块作为背景展示。常规的样式 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 有效,完美兼容

你可能感兴趣的:(CSS,HTML)