在不确定图片宽高的前提下，让加载出的图片切合宽高固定的div但不变形不留白，object-fit: cover...

例如：div是宽高为100px的正方形，但图片是长方形，想让图片填满div，但是不变形也不留白

如果直接给图片设置成宽高为100%，图片是长方形的话会变形

img{
  width:100%;
  height:100%;
}

如果设置宽高的最大限度为100%，图片为长方形的话会留白

img{
  max-width:100%;
  max-height:100%;
}

我们可以直接给图片固定宽高，然后给图片加css代码：object-fit: cover

img{
  width:100px;
  height:100px;
  object-fit: cover
}

这样图片被按比例自适应宽高100px的正方形

 

转载于:https://www.cnblogs.com/MiaDeng/p/9475445.html