div盒子宽高固定，图片正常显示

div盒子大小固定，图片要求正常铺满显示

<div class="img1">
   <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598615359091&di=2bef5c23d4e801ffdb7a349243142ff0&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20190825%2F15%2F1566717149-GjgslpqWvb.jpg" />
</div>

• 方法一：
  通过盒子设置宽、高，然后图片直接设置100%。这样小的图片，比例不同的图片会变形

.img1{
    width 400px
    height 300px
    display flex
    align-items center
    justify-content center
    img{
      width 100%
      height 100%
    }
  }

图片显示如下:

图一(变形图片)

• 方法二：直接设置图片max-width为100%，这样的话，小的图片，会居中显示，但是大的图片，会被直接截断

.img1{
    width 400px
    height 300px
    display flex
    align-items center
    justify-content center
    overflow hidden
    img{
      max-width 100%
    }
  }

图片显示如下：

图二(图片被截断)

• 方法三：完整显示图中，但是高度或者宽度不是比例时，会有留白

.img1{
    width 400px
    height 300px
    display flex
    align-items center
    justify-content center
    overflow hidden
    img{
      width 100%  
      height 100%
      object-fit contain
    }
  }

图片显示如下：

图三(会有留白)

• 方法四：图片正常铺满，图片过大时，从中间开始截取，类似于background:cover

.img1{
    width 400px
    height 300px
    display flex
    align-items center
    justify-content center
    overflow hidden
    img{
      width 100%  
      height 100%
      object-fit cover
    }
  }

图片显示如下：

图三(会有留白)