在 el-carousel标签下放一个img元素,利用img元素撑开el-carousel盒子。
别忘了改样式,el-carousel__container标签的高度一定要设置为auto,在源码内设置了高度所以要改掉。
用于撑开盒子的img元素,透明度设置为0,宽度100%。
1 <!-- 轮播背景图--> 2 <el-carousel :interval="2000"> 3 <el-carousel-item v-for="item in homeImgList" :key="item"> 4 <img :src="item" alt="img"/> 5 </el-carousel-item> 6 <img src="/src/assets/images/backImg1_home.jpg" alt="img" class="carouselImg"/> 7 </el-carousel>
1 //轮播图 2 ::v-deep(.el-carousel) { 3 width: 100%; 4 5 .el-carousel__container { 6 height: auto; 7 } 8 9 img { 10 height: 100%; 11 display: block; 12 margin: auto; 13 } 14 15 .carouselImg { 16 opacity: 0; 17 } 18 19 .el-carousel__indicators--horizontal { 20 background: #00000030; 21 } 22 }