在进行布局的时候,很多PM都要求图片等比例缩放,而且要求图片不失真,不变形,但是UI设计好了这个div的宽度又不能随意更改,而后台传过来的图片也不是等比例的图片,这就比较难受了,写成 100%;和height: 100%; 如果图片刚好和你设定的div等比例,那自然是没有问题的,但往往不是这样的.
写出来的效果也许就是这样的
这时UI一看,这是什么玩意啊,怎么把我的图片压缩了.
那么css就提供了一个属性,可以达到我们想要的效果,只需要给图片加上
object-fit: cover;
来看看效果
同样是一张图片,还是同样的大小,但是加上object-fit: cover; 之后就变了,就是这么神奇.
这个属性还有别的值
object-fit: fill;
object-fit: contain;
object-fit: scale-down;
可以自己去试一下,看看效果.