关于前端: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>