在使用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