Vue3 使用 Element Plus 的 ElCarouse

<template>
  <div class="unique-carousel">
    <ElCarousel trigger="click" height="200px">
      <ElCarouselItem v-for="item in banners" :key="item.id">
        <ElImage
          :src="item.imagePath"
          :alt="item.title"
          fit="cover"
        ></ElImage>
      </ElCarouselItem>
    </ElCarousel>
  </div>
</template>

<style scoped>
/* css 深度穿透 */
.unique-carousel /deep/ .el-image {
  /* 宽高和最外层 ElCarousel 控件宽高一致 */
  width: 100%;
  height: 200px;
  object-fit: cover;
}
</style>

默认情况下，img 的宽高是图片的宽高，当和外部 ElCarousel 控件的宽高不一致时，只有一部分能显示出来，可以想象为外部控件 ElCarousel 像一个遮罩一样罩在了 img 上，而 img 原封不动（图片原始尺寸）的铺在了最下面，此时设置 fit 不起任何作用。
这里通过 CSS 深度穿透 的方式强行覆盖了内部 .el-image 的宽高，同时通过 fit="cover" 的设置来使图片居中显示（裁剪），此时 fit 明显起了作用。