全屏图片弹窗中设置object-fit:contain的子元素为何阻止父点击事件触发

你遇到的异常本质是图片元素的交互命中区域和视觉展示区域不匹配，具体逻辑拆解：

• 你给<img>设置的width: 100%; height: 100%; object-fit: contain组合样式，存在一个容易被忽略的细节：object-fit: contain只会调整图片内容的绘制规则——把原图按宽高比缩放，在img的元素盒子内居中完整展示，剩余的留空区域因为透明，会透出下方父元素的蓝色背景；但这个属性完全不会修改img本身的盒模型尺寸，哪怕图片内容只占盒子中间很小一块，img的元素边界依然是100%宽高，和父元素完全重合，铺满整个弹窗区域。
• 你给img绑定的点击事件中加了e.stopPropagation()，意味着只要点击落在img的元素边界内——不管这个位置是展示了图片内容，还是留了透明空白——都会被img的点击事件捕获，并且阻止事件冒泡到父元素。
• 此时你视觉上看到的“蓝色背景区域”，本质是img盒子内部的透明留白，不属于父元素的可点击命中范围，所有点击都被img拦下，父元素的隐藏逻辑自然无法触发。

为什么移除object-fit: contain后事件就正常了？ #

移除object-fit: contain后，img默认采用object-fit: fill规则，会把图片内容拉伸到完全占满自己的元素盒子，没有透明留白区域，视觉上完全看不到父元素的蓝色背景，所有点击都落在拉伸后的图片内容上，和代码里img的stopPropagation逻辑完全匹配，也就不会出现“点不动父元素”的异常感知——但这种方式会让图片变形，不符合保持宽高比的需求。

要同时满足图片按比例完整展示、点击周围蓝色背景可关闭弹窗的需求，需要把img的尺寸规则从“强制100%宽高铺满”调整为“最大不超过父容器边界”，配合父容器的flex居中实现布局：

#parent {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: blue;
  /* 新增flex居中规则 */
  display: flex;
  align-items: center;
  justify-content: center;
}

#img {
  /* 移除原有的 width:100%; height:100% */
  max-width: 100%;
  max-height: 100%;
  /* 保留object-fit保证比例适配 */
  object-fit: contain;
}

修改完成后，img的元素盒子本身就等于缩放后图片的实际尺寸，周围剩下的蓝色区域是父元素自己的交互命中范围，点击这些区域会正常触发父元素的关闭逻辑，点击图片本身会被stopPropagation拦截，完全匹配需求。

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