最近在做项目的过程中，需要把图片正方形展示出来，多余的部分进行裁剪。但是从后端接口拿过来的图片可能有各种各样的形状。把自己实现的过程分享出来，大家有不满的，欢迎批评指导。
总的过程分为以下几步：
1、生产正方形的块
2、获取图片的原始尺寸，选择适应的样式

一、生产正方形的块

运用css生成块的方法很多，我用的是padding的方法。 

<div class="box">
    <img id="ID" src="src">
</div>

.box{
    width:100%;
    padding-bottom:100%; // 定义基于父元素宽度的百分比下内边距
    height:0; // 去除多余的高度 保证是正方形
    overflow: hidden; //多余的部分进行裁剪
    /* 不管图片的尺寸是多大 都进行居中显示 */
    display: -webkit-flex; /* Safari */
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}

二、获取图片原始尺寸，根据宽高选择合适样式

首先判断图片是否被浏览器缓存，缓存的话，直接获取原始尺寸，没有缓存的话，需要先加载图片，加载完成以后获取图片原始尺寸。

let newImg = new Image() // 创建图片
newImg.src = "url" // 图片的url
if (newImg.complete) { // 图片是否存在与浏览器缓存
  // 判断图片的宽高 选择合适的样式
  if (newImg.width > newImg.height) {
    document.getElementById('').setAttribute('class', 'imgHeight')
  } else {
    document.getElementById('ID').setAttribute('class', 'imgWidth')
  }
} else { // 图片不在浏览器中
  newImg.onload = () => { // 图片加载完成 获取宽高
    // 判断图片的宽高 选择合适的样式
    if (newImg.width > newImg.height) {
      document.getElementById('ID').setAttribute('class', 'imgHeight')
    } else {
      document.getElementById('ID').setAttribute('class', 'imgWidth')
    }
  }
}

样式：

.imgWidth{
  width: 100%;
  height: auto;
}
.imgHeight{
  width: auto;
  height: 100%;
}