假设一个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还有其他属性值,具体用法参考官方文档