0
点赞
收藏
分享

微信扫一扫

css3 object-fit的作用

小龟老师 2022-02-10 阅读 53

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

举报

相关推荐

0 条评论