如何制作带可点击区域的响应式背景图片？解决视口缩放置配问题

你当前的问题在于：用绝对定位的百分比元素作为点击区域时，background-size: cover会让背景图随视口比例裁剪或缩放，导致点击区域无法和门的位置精准匹配。下面提供两种可靠的解决方案：

方案一：比例容器绑定背景图与点击区域 #

通过创建一个固定宽高比的容器，让背景图和点击区域都基于该容器缩放，确保两者比例始终一致：

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* 替换padding-top值为你的图片宽高比：(图片高度/图片宽度)*100% */
/* 示例：图片宽1600，高1200，比例4:3，padding-top = 1200/1600*100% = 75% */
.door-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%;
  background-image: url("Images/turquoise-door.jpg");
  background-size: cover;
  background-position: center;
}

#anchorDoor {
  position: absolute;
  border: 1px solid red;
  /* 根据门在图片中的实际位置和大小设置百分比 */
  width: 30%;
  height: 50%;
  left: 50%;
  top: 40%;
  cursor: pointer;
}

原理 #

容器通过padding-top维持和背景图完全一致的宽高比，无论视口如何缩放，容器的比例都和图片匹配。点击区域的百分比定位/尺寸会始终对应门的实际位置，不会错位。

方案二：使用img标签+map/area（更省心） #

放弃背景图，改用img标签配合map的百分比坐标，原生支持缩放适配：

<body>
  <img src="Images/turquoise-door.jpg" usemap="#doorMap" style="width: 100%; max-width: 100%; height: auto;">
  <map name="doorMap">
    <!-- coords格式：左,上,右,下，全部用百分比 -->
    <!-- 示例对应你原代码中的位置：左50%，上40%，右50%+30%=80%，下40%+50%=90% -->
    <area shape="rect" coords="50%,40%,80%,90%" href="#" alt="进入">
  </map>
</body>

<style>
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
img {
  display: block;
}
</style>

原理 #

img标签设置width:100%自适应视口，map的百分比坐标会自动根据图片当前尺寸计算精准位置，缩放时无需额外调整，点击区域会完全跟着门的位置走。

注意事项 #

• 用背景图方案时，必须精准计算容器的padding-top值，否则背景图裁剪会导致点击区域错位；
• 若保留原背景图+媒体查询的写法，需要在媒体查询中同步调整#anchorDoor的left/top值，保证点击区域跟着门的位置移动；
• 调试时可以给点击区域加半透明背景色，方便观察是否和门对齐。

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