【轮播图】

项目场景：

提示：这里简述项目相关背景：

轮播图自适应底图大小不会超出，还能保证图片保持尺寸

---

实现方法

<Carousel autoplay={true} dots={false} style={{float: 'left',width: '90%'}} className={'shadow-box'} pauseOnHover={false} autoplaySpeed={5000} fade={true}>
                {
                  lunbo1.map((i:any,index) => {
                    return (
                      <div key={index}>
                        <div className={'img'} style={{backgroundImage:`url(${i.src})`}}>
                          <img src='https://www.sztu.edu.cn/static2022/upload/energeticc.png' className={'img-block'} alt='' />
                        </div>
                      </div>
                    )
                  })
                }
              </Carousel>

---

.shadow-box {
  background-color: rgba(255, 255, 255, 0);
  overflow: hidden;
  position: relative;
  z-index: 2; /* 确保 Carousel 组件在 img 元素之上 */
}

.img {
  position: relative; /* 不需要改变，因为你希望背景图片相对于 Carousel 容器定位 */
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #000; /* 当背景图片未加载时显示的颜色 */
}
.img img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  padding: 0;
  border: 0;
  width: 100%;
  height: auto;
  border: none;
}

.img-block {
  display: block;
  width: 100%;
  height: auto;
}

分析：

使用ant design的Carousel组件，通过设置背景图的方式，放置轮播图