css3 object-fit的作用

在使用h5的video组件的时候，部分视频和容器的尺寸不一致，会发生留出黑边的情况。在不产生大的画面变形的情况下，会使用css3样式object-ft:fill;来将视频填充满容器。那么object-fit到底有什么作用呢？通过查找资料发现object-fit有如下的属性：

1、object-fit:fill;

拉伸填满整个容器

2、object-fit:contain;

宽度铺满整个容器，高度等比缩放，超出则裁剪

3、object-fit:cover;

高度铺满，宽度等比缩放，超出则裁剪

4、object-fit:none;

图片大小不变，超出则裁剪，裁剪保留中间部分

5、object-fit:scale-down;

图片小于容器则与none一致，图片大于容器则类似contain的效果

以上。

基本上最常用的情况就是使内容填满容器，fill和contain两种用法最为常见，其次是cover。

参考资料：

https://blog.csdn.net/Kindergarten_Sir/article/details/110477105

https://www.cnblogs.com/ranyonsue/p/9367423.html