如何让Lightbox图库的背景图片随CSS设置同步适配缩放？

CSS基础调整（保证比例一致） #

先修改你的CSS样式，添加背景图的缩放与定位属性，确保在不同设备上背景图比例不变：

.slide-show_containers {
    position: fixed;
    z-index: 2000;
    display: none;
    top: 0;
    left: 0;
    background-image: url(img/background/Frame.png);
    width: 100%;
    height: 100%;
    /* 新增属性 */
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

• background-size: contain：让背景图按原始比例缩放，完整显示在容器内，避免拉伸变形，保证移动端和桌面端的背景比例一致。
• background-position: center center：确保背景图始终居中显示，不管容器尺寸如何变化，视觉焦点保持统一。

进阶：背景与图片完全同步缩放 #

如果需要背景图和当前展示的图库图片完全同步缩放（比如图片放大/缩小时背景也对应调整），需要结合JavaScript动态计算尺寸：

// 获取容器和当前显示的图库图片元素
const container = document.querySelector('.slide-show_containers');
let currentLightboxImage = document.querySelector('.lightbox-image');

// 同步背景与图片缩放比例的函数
function syncBackgroundWithImage() {
    if (!currentLightboxImage || !container) return;
    
    // 计算图片和容器的宽高比
    const imgRatio = currentLightboxImage.naturalWidth / currentLightboxImage.naturalHeight;
    const containerRatio = container.clientWidth / container.clientHeight;

    // 根据比例匹配背景尺寸，和图片保持一致缩放
    if (imgRatio > containerRatio) {
        container.style.backgroundSize = `${container.clientWidth}px auto`;
    } else {
        container.style.backgroundSize = `auto ${container.clientHeight}px`;
    }
}

// 初始化执行一次
syncBackgroundWithImage();

// 窗口尺寸变化时重新计算
window.addEventListener('resize', syncBackgroundWithImage);

// 切换图库图片时更新并重新计算（根据你的图库切换逻辑调整选择器）
document.querySelectorAll('.gallery-item').forEach(item => {
    item.addEventListener('click', () => {
        // 等待新图片加载完成后更新
        setTimeout(() => {
            currentLightboxImage = document.querySelector('.lightbox-image');
            syncBackgroundWithImage();
        }, 100);
    });
});

这段代码会监听窗口尺寸变化和图片切换事件，实时计算当前图片的宽高比，动态调整背景图的尺寸，确保背景和图片的缩放比例完全匹配，在移动端和桌面端都能保持一致的显示效果。

内容的提问来源于stack exchange，提问作者Eliot Lord