video作为背景全屏铺满问题

项目中我打算使用一个MP4视频作为登录界面背景,首先在静态页面都没法显示出来,后来发现需要将视频的编码格式转换为H264的格式方能正常显示(使用格式工厂转换即可);

后又发现视频没办法铺满全屏,在不同的分辨率下会往左上角缩回来,而且还有滚动条。不像背景图片可以直接使用background-size:cover;即可搞定 ,于是百度一圈发现直接给video定位,宽高设置为自动的即可。具体代码如下所示:

  video{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
}

其他网友说使用 object-fit:fill;属性;也有说计算出video父级的高度和video本身的高度,再通过计算得出padding-bottom的值来,我试了没效果,使用上面的代码简单粗暴的解决了问题。

上一篇:laravel5如何创建service provider和facade


下一篇:Pipeline模式与Factory+Provider模式的应用