如何在全屏遮罩Modal中居中图片并适配移动端？

核心修改点 #

1. 用Flexbox实现模态框内图片的水平垂直居中，替代不可靠的transform方案
2. 限制图片最大宽高避免超出屏幕，同时保持原比例不拉伸
3. 优化关闭逻辑，避免点击图片时误关模态框

修改后的完整代码 #

HTML（无需改动）

<main role="main">    
    <h1 class="h1-mapas">MAPAS DE SUBTE</h1>
    <div class="main-div">
      <div id="img-div" class="img-div">
        <img id="mapa-img" class="mapa-img" src="/images/mapa-subte.jpg" alt="Mapa de subte con todas las líneas y paradas">
      </div>
    </div>
    <div id="theModal" class="modal">
      <img class="modal-img" id="modalImg">
    </div>
  </main>

CSS（关键修改）

.modal {
  display: none;
  position: fixed; /* 固定定位，确保始终覆盖全屏 */
  z-index: 1;
  background-color: rgba(255,255,255,0.9);
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  /* Flex布局实现完美居中 */
  justify-content: center;
  align-items: center;
}

.modal-img {
  /* 限制图片最大占比为屏幕的80%，符合需求 */
  max-width: 80vw;
  max-height: 80vh;
  /* 保持图片原比例，不拉伸变形 */
  object-fit: contain;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform: scale(0.1); opacity: 0;} 
  to {transform: scale(1); opacity: 1;}
}

JavaScript（优化关闭逻辑）

const modal = document.getElementById("theModal")
const img = document.getElementById("mapa-img")
const modalImage = document.getElementById("modalImg")

img.onclick = function() {
  modal.style.display = "flex" // 启用Flex布局
  modalImage.src = this.src
}

// 仅点击模态框背景时关闭，点击图片不触发
modal.onclick = function(e) {
  if(e.target === modal) {
    modal.style.display = "none"
  }
}

问题原因解释 #

• 原代码中margin: 0 auto只能实现水平居中，无法垂直居中；且未限制图片最大高度，导致长图超出屏幕或拉伸变形。
• 使用position: fixed替代absolute，确保模态框始终覆盖当前视口，不会随页面滚动移位。
• object-fit: contain保证图片在限制的宽高范围内完整显示，同时保持原始比例，彻底解决拉伸问题。
• Flexbox布局是目前实现容器内元素居中最可靠的方案，无需复杂的定位计算，适配所有屏幕尺寸（桌面/移动端）。

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