CSS - img 自适应宽高

使用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还有其他属性值，具体用法参考官方文档