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