看起来你遇到的核心问题是绝对定位的Hover元素没有基于响应式的地图容器定位，同时Hover内的图片和文本缺少自适应单位支持。之前单纯改百分比没用，是因为没给父容器设置定位基准，也没用到随视口缩放的适配单位。下面是具体的修复方案：

第一步：完善地图容器的响应式基础 #

首先要确保地图所在的tabcontent容器是相对定位的，这样内部绝对定位的Hover元素才会以它为基准（而不是整个页面），同时让地图图片本身能自适应容器宽度：

.tabcontent {
  position: relative; /* 关键：让内部绝对定位元素以该容器为基准 */
  width: 100%;
  max-width: 100%;
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  /* 如果你的地图有固定宽高比，添加这个属性保持比例，比如4:3就写4/3 */
  aspect-ratio: 16/9;
}

/* 给地图图片添加响应式样式 */
.map-image {
  width: 100%;
  height: auto;
  display: block;
}

对应的HTML需要把地图图片放进tabcontent里：

<div id="B1" class="tabcontent">
  <!-- 这里是你的楼层地图图片 -->
  <img src="你的地图图片路径" class="map-image" alt="B1楼层地图">
  <!-- 你的Hover元素 -->
  <div class="hoverinfosupermarket"> 
    <span>#B1-01</span> 
    <p> 
      <img alt="Supermarket" src="/cs/w/img/supermarket.jpg" class="hover-img"/>
      <br /> Supermarket 
    </p> 
  </div>
</div>

第二步：修改Hover元素样式，实现全响应式适配 #

把固定的font-size和图片尺寸改成vw单位（视口宽度的百分比），同时优化定位精准度：

.hoverinfosupermarket {
  position: absolute;
  top: 79%;
  left: 37%;
  font-size: 1.5vw; /* 随视口宽度缩放的字体 */
  font-family: Arial;
  font-weight: bold;
  color: #6e706f;
  cursor: default;
  transform: translate(-50%, -50%); /* 让元素中心对准定位点，缩放时不会偏移 */
}

.hoverinfosupermarket p {
  display: none;
  color: #000000;
  font-size: 1vw; /* 同样用vw适配文本 */
  background-color: rgba(255, 255, 255, 0.7);
  padding: 0.5vw; /* 内边距也用vw保持比例 */
  border-radius: 4px;
  white-space: nowrap; /* 防止文本换行混乱 */
}

.hoverinfosupermarket:hover p {
  display: block;
}

/* 让Hover内的图片也响应式 */
.hover-img {
  width: 8vw;
  height: auto;
  display: block;
  margin: 0 auto;
}

方案解释 #

1. position: relative：给tabcontent加上这个属性后，Hover元素的绝对定位会绑定到地图容器，缩放时定位点会跟着地图同步移动。
2. vw单位：相对于视口宽度的比例单位，不管屏幕尺寸如何变化，都会按比例缩放，完美解决响应式下的尺寸适配问题。
3. transform: translate：默认绝对定位是元素左上角对准top/left位置，加上这个后会让元素中心对准定位点，保证标记点始终精准落在地图对应的位置上。

这样调整后，你的Hover内容就会跟着地图一起缩放，不会再出现错位或者尺寸不协调的问题了。

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