#carouselContainer {
    width: 100%;
    height: 550px;
    /*height: auto;*/
    position: relative;
    overflow: hidden;
    background-color: #f6f7ff; /* 淡蓝背景色 */
    margin: auto;
}

#carouselTrack {
    display: flex;
    transition: transform 0.5s ease;
    height: 100%;
}

.carousel-slide {
    /*
     * 使用 Flexbox 布局模型中的 flex 属性来定义弹性项目的增长、收缩和基础大小。
     *
     * flex: 0 0 100%;
     *
     * 这个属性值由三个部分组成：
     * 1. flex-grow: 0;  // 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
     * 2. flex-shrink: 0; // 定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
     * 3. flex-basis: 100%; // 定义在分配多余空间之前，项目占据的主轴空间（main size）。
     *                      // 百分比是相对于其父容器的宽度来计算的。
     *
     * 综合起来，这个属性值表示：
     * - 项目不会放大也不会缩小。
     * - 项目的基础大小为其父容器宽度的100%。
     */
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-btn {
    display: none; /* 隐藏按钮 */
}

/* 移动端适配 */
@media only screen and (max-width: 768px) {
    #carouselContainer {
        height: auto; /* 高度自适应 */
    }

    .carousel-slide img {
        object-fit: contain; /* 图片完整显示，不裁剪 */
    }
    #carouselTrack {
        display: flex;
        transition: transform 0.5s ease;
        height: 100%;
    }
}