點選單元格後彈出對話方塊輪播圖片，用Carousel 走馬燈實現。
希望圖片無論解析度多少，都能在一屏內顯示，這時就要用圖片自適應。

• 圖片外層容器，使用 flex 佈局，設定對齊方式為主軸、交叉軸居中

  display: flex;
  align-items: center;
  justify-content: center;

• 圖片自適應寬高

  max-width: 100%; height-width: 100%

完整的栗子

<template>
  <el-dialog :visible.sync="visible"
        :top="0"
        :modal="true"
        @close="$emit('update:show', false)"
            >
      <div align="center">
        <el-carousel indicator-position="outside" trigger="click" height="90vh">
          <el-carousel-item class="el-carousel__item" v-for="(p, idx) in imageUrlList" :key="idx">
            <img class="carousel-image" :src="p | slimPic" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-dialog>
</template>

<script>
import { slimPic } from '@/utils/qiniu.js'

export default {
  name: 'DialogImageCarousel',
  props: {
    // 是否可見
    show: {
      type: Boolean,
      default: false,
    },
    // 傳入的圖片url陣列
    imageUrlList: {
      type: Array,
      default(){
        return []
      }
    }
  },
  filters: {
    slimPic
  },
  watch: {
    show(){
      this.visible = this.show
    }
  },
  data(){
    return {
      visible: this.show,
    }
  },
}
</script>

<style lang="scss" scoped>
.el-carousel__item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .carousel-image {
    max-width: 100%;
    max-height: 100%;
  }
}
</style>