elementui 走馬燈圖片自適應

點擊單元格后彈出對話框輪播圖片，用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>