element-plus的走马灯carousel图片轮播让图片居中显示

element-plus的走马灯carousel图片轮播怎么让图片居中显示呢？官网里查了一下，没找到。只能自己摸索一下了。盒子模型，要让图片居中，首先要确定盒子的大小，然后确定图片的大小，盒子使用居中样式，应该就是这样。

Banner.vue

<script setup>

</script>

<template>
  <el-carousel height="720px" :interval="3000" arrow="always">
    <el-carousel-item>
      <img src="/image/alex.jpeg" alt="">
    </el-carousel-item>
    <el-carousel-item>
      <img src="/image/banner1.png" alt="">
    </el-carousel-item>
    <el-carousel-item>
      <img src="/image/banner2.png" alt="">
    </el-carousel-item>
    <el-carousel-item>
      <img src="/image/banner3.png" alt="">
    </el-carousel-item>
  </el-carousel>
</template>

<style scoped>
.el-carousel {
  text-align: center;
}
.el-carousel__item img {
  height: 720px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>

首先确定走马灯的高度是720px，那宽度自动就是100%了。再确定盒子的子元素居中显示：

.el-carousel {
  text-align: center;
}

再确定图片的高度是720px，如果不确定图片的高度，如果有图片小于这个高度或者大于720px，就会显示不全。

正常的确定图片高度后，图片的宽度会自动按照比例缩放。