Element 走马灯宽高自适应高度

<template>
  <!-- 首页顶部轮播 -->
  <div class="home-swiper">
    <el-carousel arrow="never">
      <el-carousel-item>
        <img class="banner-img" src="@/assets/img/home_banner.png" alt="">
      </el-carousel-item>
      <el-carousel-item>
        <img class="banner-img" src="@/assets/img/home_banner2.png" alt="">
      </el-carousel-item>
      <el-carousel-item>
        <img class="banner-img" src="@/assets/img/home_banner3.png" alt="">
      </el-carousel-item>
      <!-- 目的是为了让内容撑开盒子,注意下面这个图片是写在el-carousel-item外面,主要作用就是为了撑开盒子,配合下面的样式使用 -->

      <img class="toolImg" src="@/assets/img/home_banner.png" alt="">
    </el-carousel>
  </div>
</template>

<script></script>

<style lang="scss" scoped>
.home-swiper {
  width: 100%;
  margin-bottom: 24px;
  border-radius: 12px 12px 12px 12px;
  overflow: hidden;

  :deep(.el-carousel__container) { 上面用了scoped所以要穿透样式,有的穿透是::v-deep,/deep/根据你们项目来使用
    height: auto; 原来设置了最小高度,所以这一步必须的
  }
  img {
    width: 100%;
    height: 100%;
  }

  .toolImg {
    opacity: 0;
  }
}
</style>