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>

转载于:https://www.cnblogs.com/wbjxxzx/p/10069133.html