css图片自适应object-fit

当图片比例不固定时,想要让图片自适应,一般都会用background-size:cover/contain,但是这个只适用于背景图。

img有个属性object-fit

属性值:object-fit: fill / contain / cover / none / scale-down;
fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致,长的那条等比缩放,可能会有留白。
cover: 保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致,短的那条等比缩放。可能会有部分区域不可见。
none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down:保持原有尺寸比例,如果容器尺寸大于图片内容尺寸,保持图片的原有尺寸,不会放大失真;容器尺寸小于图片内容尺寸,用法跟contain一样。

具体如下图所示:


CSS Demo

用法:

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

这个属性看起来很好用,但是!但是!IE并不支持

浏览器的兼容情况

又但是,你可以去GutHub看看...

img有了object-fit,还得有个位置属性object-position,用法跟background-position一样。


还有一个问题,就是上图CSS Demo,我给了容器一个红色的背景色,因为img宽高都设置了百分百,我想看看img最终的大小是多少,然后我就给了img一个黑色的背景色。结果,如图所示,图片大小果然是百分百。