如何实现图片全屏适配且可区分图片与空白区域的点击？

解决方案代码 #

div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* 用flex布局实现图片居中，空白区域归属于父容器 */
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  /* 限制图片最大尺寸不超出容器，自动保持原比例 */
  max-width: 100%;
  max-height: 100%;
  border: thin solid black;
}

<div>
  <img src="https://placekitten.com/200/300" alt="">
</div>

原理说明 #

你原来的写法中，给img设置width:100%;height:100%配合object-fit:contain，虽然视觉上图片按比例居中显示，但img元素的实际占位是整个容器，导致点击事件无法区分图片和空白区域。

改用flex布局后：

• 父容器作为全屏容器，通过flex属性实现图片的水平/垂直居中
• img的max-width和max-height限制了它的最大尺寸，让图片自动按原比例适配容器的可用空间，效果和object-fit:contain完全一致
• 此时img的实际点击区域就是它显示的范围，空白区域属于父div，绑定事件时可以直接区分：img的事件仅响应图片区域，父div的事件响应空白部分

补充说明 #

如果因特定场景必须使用object-fit，可以额外嵌套一层容器来实现，但上述flex方案是最简洁的纯CSS实现，完全不需要JS监听窗口resize。

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