css3 object-fit使用

零碎沉默 / 2023-07-25 / 原文

1、object-fit:fill;

拉伸填满整个容器

2、object-fit:contain;

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

3、object-fit:cover;

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

4、object-fit:none;

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

5、object-fit:scale-down;
图片小于容器则与none一致,图片大于容器则类似contain的效果