使图片不拉伸显示问题 （例微信）

//方法一：直接修改img样式
.container{
    width: 200px;
    height: 200px;
    overflow: hidden;
    border: 2px solid red;
    position: relative;
}
.container img{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

方法二：将图片变成背景，最方便
.container{
    width: 200px;
    height: 200px;
    border: 2px solid red;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

方法三：置于特定比例的容器中，固定宽/高，会导致图片变形。
.head img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

 

参考文章：https://www.jianshu.com/p/b6ba6141420e