如何实现点击图片时以原始尺寸在模态框/ImageView中显示

问题说明 #

容器内的图片为了对齐需求设置了统一宽高，导致图片分辨率受损；需要实现点击任意图片时，在模态框中以原始尺寸展示图片，且图片为动态加载，无法通过ID绑定事件。

解决方案 #

通过事件委托处理动态图片的点击事件，配合模态框组件实现原始尺寸预览：

1. 完整HTML结构 #

添加模态框代码到页面合适位置：

<div class="row">
  <div class="col-sm-5">
    <div class="custom-class">
      <span class="Custcontent">
        <img src="https://picsum.photos/200/300" style="width: 250px; height: 250px; border: thin solid black; margin: 5px; cursor: pointer;">
        <img src="https://picsum.photos/200" style="width: 250px; height: 250px; border: thin solid black; margin: 5px; cursor: pointer;">
        <img src="https://picsum.photos/id/237/200/300" style="width: 250px; height: 250px; border: thin solid black; margin: 5px; cursor: pointer;">
        <img src="https://picsum.photos/seed/picsum/200/300" style="width: 250px; height: 250px; border: thin solid black; margin: 5px; cursor: pointer;">
      </span>
    </div>
  </div>
</div>

<!-- 图片预览模态框 -->
<div id="imageModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="modalImg">
</div>

2. 补充CSS样式 #

添加模态框及交互样式：

.custom-class {
    overflow-y: auto;
    height: 350px;
    -webkit-overflow-scrolling: touch;
}
.Custcontent {
    position: relative;
    float: left;
}

/* 模态框基础样式 */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

/* 原始尺寸图片展示 */
.modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
}

/* 关闭按钮样式 */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
}

3. JavaScript交互逻辑 #

用事件委托处理动态图片点击，实现预览与关闭功能：

// 获取模态框元素
const modal = document.getElementById('imageModal');
const modalImg = document.getElementById('modalImg');
const closeBtn = document.querySelector('.close');

// 事件委托：监听父元素，处理所有动态加载的图片点击
document.querySelector('.Custcontent').addEventListener('click', function(e) {
  if (e.target.tagName === 'IMG') {
    modal.style.display = 'block';
    modalImg.src = e.target.src;
  }
});

// 点击关闭按钮隐藏模态框
closeBtn.addEventListener('click', function() {
  modal.style.display = 'none';
});

// 点击模态框背景关闭预览
modal.addEventListener('click', function(e) {
  if (e.target === modal) {
    modal.style.display = 'none';
  }
});

核心要点 #

• 事件委托：通过父元素绑定事件，完美适配动态加载的图片，无需给每张图片单独绑定事件
• 原始尺寸恢复：模态框内图片移除固定宽高限制，用max-width/max-height保证图片在视口内完整展示
• 交互优化：支持点击关闭按钮或模态框背景关闭预览，提升用户体验

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