css 如何实现图片等比例缩放

在进行布局的时候,很多PM都要求图片等比例缩放,而且要求图片不失真,不变形,但是UI设计好了这个div的宽度又不能随意更改,而后台传过来的图片也不是等比例的图片,这就比较难受了,写成 width: 100%;和height: 100%; 如果图片刚好和你设定的div等比例,那自然是没有问题的,但往往不是这样的.

写出来的效果也许就是这样的



这时UI一看,这是什么玩意啊,怎么把我的图片压缩了.

那么css就提供了一个属性,可以达到我们想要的效果,只需要给图片加上

object-fit: cover;

来看看效果



同样是一张图片,还是同样的大小,但是加上object-fit: cover;之后就变了,就是这么神奇.

这个属性还有别的值

object-fit: fill;
object-fit: contain;
object-fit: scale-down;

可以自己去试一下,看看效果.