实现灯箱幻灯片图片最大化居中及周边信息列的适配布局

现有问题核心原因 #

• 未使用弹性布局做横向排列，原position: absolute定位的EXIF框完全脱离文档流，导致元素位置错乱
• 图片的max-width: 100%是相对于整个视口宽度计算，未预留两侧信息框的宽度空间，导致窗口缩放时图片两侧出现多余空隙
• 所有幻灯片默认全部渲染在DOM中，无激活态显示逻辑，导致多内容堆叠
• 切换按钮未做固定定位，跟随文档流排版占用内容空间，导致图片无法正常居中

前置修正 #

1. 先修复HTML里的闭合标签错误：把EXIF表格里的<td>{{$v}}<td>改为<td>{{$v}}</td>，避免表格布局错乱
2. 给所有幻灯片加默认隐藏逻辑，仅激活的幻灯片显示

替换后的完整CSS规则 #

删除原有调试遗留的无效代码（比如#img-grid重复声明的display: table、.lbox img中注释错位的属性），替换为以下规则：

/* 灯箱根容器：占满视口，垂直居中内容 */
.lbox {
    position: fixed;
    z-index: 1;
    inset: 0;
    background-color: rgb(0 0 0 / 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

/* 切换按钮：固定在视口左右边缘垂直中点，不占内容流空间 */
.prev, .next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: white;
    background: black;
    padding: 1rem 0.5rem;
    cursor: pointer;
}
.prev { left: 0; }
.next { right: 0; }

/* 幻灯片默认隐藏，仅激活项显示 */
.slide {
    display: none;
    align-items: center;
}
.slide.active {
    display: flex;
}

/* 通用信息框样式 */
.infobox {
    background-color: gray;
    margin: 0;
    height: 100%;
    max-height: 100vh;
    overflow-y: auto;
}

/* 左侧画廊信息框 */
.gal-info {
    max-width: 25vw;
    white-space: pre-line;
}

/* 右侧EXIF信息表格：移除原有绝对定位，放回文档流 */
.img-exif {
    max-width: 25vw;
}

/* 图片尺寸适配 */
.lbox .photo {
    max-height: 100vh;
    max-width: 50vw;
    object-fit: contain;
    margin: 0;
}

适配规则对应实现效果 #

• 竖版图片：图片高度撑满视口高度，宽度按自身比例自适应，左右信息框与图片同高，自动紧贴图片边缘，整体通过flex在视口居中
• 横版图片：图片最大宽度限制为视口宽度的50%，加上左右信息框各最多25%的视口宽度，三者总宽度刚好等于视口宽度，不存在多余空隙
• 切换按钮固定在视口边缘，不干扰内容排版

配套JS逻辑提醒 #

在changeSlide函数中，切换时为当前幻灯片添加active类，移除同灯箱下其他幻灯片的active类，避免内容堆叠。

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