CSS - img自适应宽高

使用CSS3属性object-fit，参考博客CSS3 object-fit属性

假设一个img为宽200px，高150px，不对img属性做任何处理，图片会被拉伸，如下图所示

为了不让图片被拉伸，可以居中显示在固定的宽高内（200px 150px），通常解决办法是写在一个div内，为div设置以下属性

background: url('xxx') center center no-repeat;
background-size: 100%;

在img中使用object-fit属性，可以达到同样得效果

width: 200px
height: 150px
object-fit: cover

图片会裁剪显示，如下图所示

object-fit还有其他属性值，具体用法参考文档

长宽相等的图片

.cover {
  position: relative;
  padding-bottom: 100%;
  width: 100%;
  height: 0;
  
  img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}