九宫格预览图片自适应居中

当宽高不一的图片要在一个正方形容器居中显示时，
先看效果图

TIM图片20200104161814.png

点击展开大图效果：

TIM图片20200104162007.png
TIM图片20200104162054.png
只需要一个css属性即可，代码：

//九宫格预览部分
<div class="img-list">
    <div class="pic" v-for="(item,index) in imageList" :key="index">
        <img @click="ShowPic(index)" :src="item" alt>
    </div>
</div>
//点开查看大图部分
<div class="show-pic" @click="ClosePopup" v-show="popup == true">
    <img v-for="(item,index) in imageList" v-show="displayPic == index" :key="index" :src="item" alt="">
</div>
//data部分
data: function () {
    return {
      displayPic: 0,
      popup: false,
      imageList: [
        "/static/img/show-01.jpg",
        "/static/img/show-02.jpg",
        "/static/img/show-03.jpg",
        "/static/img/show-04.jpg",
        "/static/img/show-05.jpg",
        "/static/img/show-01.png",
        "/static/img/show-02.png",
        "/static/img/show-03.png",
      ]
    };
  },

css部分

.img-list {
      margin-top: 100px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 0 20px;
      box-sizing: border-box;
      .pic {
        width: 110px;
        height: 110px;
        padding: 5px;
        box-sizing: border-box;
        overflow: hidden;
        img {
          width: 100px;
          height: 100px;
          object-fit: cover;
          border-radius: 6px;
        }
      }
    }
.show-pic {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background: #111;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      img {
          width: 100%;
      }
  }

方法

ShowPic(show) {
      this.displayPic = show
      this.popup = true
    },
ClosePopup(){
        this.popup = false
    }