
/* 默认样式，适用于大屏幕设备 */
.slideshow {
    width: 100%; /* 宽度可以是百分比，以便在不同屏幕尺寸下调整 */
    max-width: 1920px; /* 设置一个最大宽度，以防止在大屏幕上过大 */
    height: 600px; /* 高度可以根据需要调整，但注意保持内容的可读性 */
    margin: 0 auto; /* 水平居中 */
    position: relative; /* 相对定位，以便内部元素可以绝对定位 */
    overflow: hidden; /* 隐藏溢出内容 */
}

/* 如果 .slideshow 直接应用于 <img> 元素 */
img.slideshow {
    width: 100%; /* 宽度为容器的100%，以保持响应性 */
    height: auto; /* 高度自动调整，以保持图像的宽高比 */
    /* 注意：在这种情况下，通常不需要 object-fit: cover，因为图像已经根据宽度自动缩放 */
}

/* 媒体查询，适用于中等屏幕设备（如平板电脑） */
@media (max-width: 991px) {
    .slideshow {
        height: 400px; /* 在中等屏幕上调整高度 */
        object-fit: cover;
    }
}