如何扩大图片hover触发区域（Hitbox）且不改变图片实际尺寸

这里给你两个靠谱的方案，不用改图片实际尺寸就能扩大hover触发范围：

方案一：用伪元素扩展触发区域 #

给图片套个父容器，利用透明伪元素把hover触发区域铺满更大范围，图片保持原尺寸：

.img-container {
  position: relative;
  /* 自适应图片尺寸，不用硬写宽高 */
  display: inline-block;
}

.img-container::before {
  content: "";
  position: absolute;
  /* 上下左右各扩展20px触发区域，数值按需调整 */
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  z-index: 1; /* 伪元素在图片上方但完全透明，不影响显示 */
}

.img-container img {
  transition: transform 0.3s ease;
  display: block;
}

.img-container:hover img {
  transform: scale(1.2); /* hover时的放大比例，可自定义 */
}

原理是透明伪元素覆盖了比图片更大的区域，用户hover这个伪元素就会触发父容器的hover状态，进而让图片放大，完全不影响视觉效果。

方案二：用容器的透明padding扩展区域 #

给图片套个容器，用padding扩大触发区域，同时通过box-sizing: border-box保证容器整体尺寸和原图片一致：

.img-container {
  width: 200px; /* 设置为图片实际宽度 */
  height: 150px; /* 设置为图片实际高度 */
  padding: 20px; /* 上下左右各加20px触发区域 */
  box-sizing: border-box; /* 让padding算进容器宽高，避免容器变大 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.img-container:hover img {
  transform: scale(1.2);
}

这个方法里，容器的padding区域也能触发hover，且容器整体尺寸和原图片一致，图片在容器内居中显示，hover整个容器（包括padding区）都会触发放大效果。

如果是不确定尺寸的动态图片，方案一的自适应写法更灵活；如果是固定尺寸的图片，方案二操作起来更直接。缩放比例和过渡时间都可以根据需求调整。

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