如何正确设置图片居中与尺寸，实现桌面/移动端无裁切适配？

问题现状 #

点击小图可触发全屏居中的图片预览层，点击预览图可隐藏，但响应式切换时存在显示问题：

• 设置max-height:90%时，桌面端显示正常，但移动端图片左右边缘被裁切
• 设置max-width:90%时，桌面端显示正常，但移动端图片上下部分被裁切

修复方案 #

核心思路是同时限制图片的最大宽高，让图片在不超出视口范围的前提下保持原比例完整显示，同时优化预览层的全屏覆盖逻辑：

1. 修正CSS样式 #

修改#pictureframe和预览图的样式，确保背景层全屏覆盖，图片自适应视口且完整显示：

#pictureframe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #00000066;
    display: flex;
    align-items: center;
    justify-content: center;
}

#pictureframe > img {
    max-height: 90vh;
    max-width: 90vw;
    border: solid 2em #000000;
    border-radius: 1em;
    cursor: pointer;
    object-fit: contain;
}

.isHidden {
    display: none;
    visibility: hidden;
    z-index: -1;
}

.isVisible {
    display: flex;
    visibility: visible;
    z-index: 99;
}

2. 简化JS逻辑（可选） #

原逻辑无需大幅修改，仅优化遍历方式提升可读性：

const pictureframe = document.getElementById('pictureframe');
const pictureframeImg = pictureframe.querySelector('img');
const imgarray = document.getElementById('pictures').querySelectorAll('img');

imgarray.forEach(img => {
    img.addEventListener('click', () => {
        pictureframe.classList.replace('isHidden','isVisible');
        pictureframeImg.src = img.src;
    });
});

pictureframeImg.addEventListener('click', () => {
    pictureframe.classList.replace('isVisible','isHidden');
});

关键调整说明 #

• 将#pictureframe改为fixed定位并设置宽高为100vw/100vh，实现全屏遮罩效果
• 给预览图同时设置max-height:90vh和max-width:90vw，确保图片在视口内的最大显示范围，不会超出屏幕
• 使用object-fit:contain强制图片保持原比例完整显示，避免裁切
• 父容器用flex布局实现图片的居中对齐，替代原有的position+transform方案，更简洁可靠

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