图片居中

无论哪种图片（图片地址是网络地址，正方形，高比宽长的长方形，宽比高长的长方形。如果高比宽长的长方形，宽度100%，宽比高长的长方形，高100%），都是居中填满展示，怎么做？

1、object-fit：https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

<div class="box">
    <img class="pic" src="https://qiniustatic.wodidashi.com/guess/1.jpg">
</div>

.box{
    width: 100px;
    height: 100px;
    overflow: hidden;
}

.pic{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

2、七牛图片裁剪：https://developer.qiniu.com/dora/manual/1279/basic-processing-images-imageview2

<div>
    <img src="https://qiniustatic.wodidashi.com/guess/1.jpg?imageView/1/w/200/h/200">
</div>

3、background-size

<div class="box"></div>

.box{
    width: 100px;
    height: 100px;
    overflow: hidden;
    background: url("https://qiniustatic.wodidashi.com/guess/1.jpg") no-repeat center;
    background-size: cover;
}

4、JS

<div class="box">
    <img class="pic" src="https://qiniustatic.wodidashi.com/guess/1.jpg">
</div>

.box{
    width: 100px;
    height: 100px;
    overflow: hidden;
}

.pic1{
    width: 100%;
}

.pic2{
    height: 100%;
}

axios.get('https://qiniustatic.wodidashi.com/guess/1.jpg?avinfo')
  .then(res=>{
      const width = res.stream[0].width;
      const height = res.stream[0].height;
      const radio = width/height;
      if(radio < 1){
          // .pic1
      }else{
          // .pic2
      }
  })