如何使所有这些小图像在调整大小时停止移动

Question

我必须制作一张包含所有这些位置点的地图。地图上已经有点，但他们想要悬停效果，所以我必须重新创建点，以便它们可以具有该效果，然后将它们分层在原始点上。问题是，当我调整大小时（由于某种原因，仅在移动屏幕尺寸上），它们会稍微向左移动。有没有办法来解决这个问题？这是更改的图片以及我的代码。

忽略布鲁克林的那些。这些我都没做过。

100% 缩放：

150% 缩放：

我的代码（忽略缺少js。我摆脱了它，因为它表面上人肉了这些地方）：

 @media only screen and (max-width: 800px) {
    /* This is for screens that are phone screen sizes */
    /* This code below is for the map */

#main_map_div{
    position: relative;
}

.map_point{
  position: absolute;
}


#map{
    position: absolute;
    width: 100vw;
}

.hidden{
  visibility: hidden;
}
    #brightside{
    top: -46vw;
    left: 33.2vw;
    width: 4vw;
}

  #cargo{
    top: 42.6vw;
    left: 29.1vw;
    width: 4.5vw;
}
  #achilles{
    top: 50.2vw;
    left: 28vw;
    width: 4.3vw;
}
  #do{
    top: 25.5vw;
    left: 46.8vw;
    width: 4vw;
}
 #monas{
    top: 25vw;
    left: 52vw;
    width: 4.1vw;
}
 #bohemia{
    top: 31vw;
    left: 49.4vw;
    width: 4vw;
}
 #cumming{
    top: 23.7vw;
    left: 57.9vw;
    width: 3.4vw;
}
 #fnj{
    top: 29.3vw;
    left: 55.8vw;
    width: 3.8vw;
}
#rebar{
    top: 30vw;
    left: 63.8vw;
    width: 3.7vw;
}
 
#turnmill{
    top: 23.2vw;
    left: 66.7vw;
    width: 3.6vw;
}
  
#silvana{
    top: 29.9vw;
    left: 71.6vw;
    width: 3.6vw;
}

#patrick{
    top: 25vw;
    left: 77vw;
    width: 3.5vw;
}
  
#elevenst{
    top: 23.7vw;
    left: 86.2vw;
    width: 3.7vw;
}

#bbh{
    top: 36.5vw;
    left: 84vw;
    width: 4vw;
}

#diwine{
    top: 38vw;
    left: 68vw;
    width: 4vw;
}

#dominie{
    top: 46vw;
    left: 68.8vw;
    width: 4vw;
}

#neirs{
    top: 54.5vw;
    left: 61.9vw;
    width: 4vw;
}

#sst{
    top: 67%;
    left: 53.2%;
    width: 4.2%;
}

#lobster{
    top: 67%;
    left: 46.5%;
    width: 4.2%;
}

#erdp{
    top: 62%;
    left: 40.5%;
    width: 4%;
}

#lowlands{
    top: 55%;
    left: 42.8%;
    width: 4%;
}

#wmc{
    top: 54%;
    left: 50%;
    width: 4%;
}

#metropolitan{
    top: 49%;
    left: 46.4%;
    width: 4%;
}

#ilporto{
    top: 55.5%;
    left: 56.2%;
    width: 4%;
}

#superfine{
    top: 50%;
    left: 53%;
    width: 4%;
}
  }

<div id="map_main_div">
  <div id="info_card" class="hidden">
    <p id="title">Brightside Tavern</p>
    <p id="address">141 Bright St, Jersey City, 07302</p>
  </div>
  <img id="map_image" src="/s/map.png" />
  <img src="/s/brightside.png" id="brightside" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()"/>
  <img src="/s/cargo.png" id="cargo" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()"/>
  <img src="/s/achilles.png" id="achilles" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/do.png" id="do" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/monas.png" id="monas" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/bohemia.png" id="bohemia" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/cumming.png" id="cumming" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/fnj.png" id="fnj" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/rebar.png" id="rebar" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/turnmill.png" id="turnmill" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/silvana.png" id="silvana" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/patrick.png" id="patrick" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/elevenst.png" id="elevenst" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/erdp.png" id="erdp" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/lowlands.png" id="lowlands" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/metropolitan.png" id="metropolitan" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/lobster.png" id="lobster" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/wmc.png" id="wmc" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/superfine.png" id="superfine" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/ilporto.png" id="ilporto" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/sst.png" id="sst" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/diwine.png" id="diwine" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/neirs.png" id="neirs" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/dominies.png" id="dominie" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
  <img src="/s/bbh.png" id="bbh" class="map_point" onmouseover="showInfo(this)" onmouseout="hideInfo()" />
</div>

%、vw、vh 和 px 都创建了这个移动问题。我不是最擅长 CSS，所以我不确定使用不同的 CSS 是否可以解决问题，或者其他方法是否会有所帮助。我还将包含图像本身，以便您可以自己尝试一下（如果有帮助的话）。

Answer 1

移动设备的问题是，如果未明确提供高度和宽度，您可以在不考虑高度/宽度比的情况下调整图像容器的大小。因此，解决方案包括使用一个 div 容器，将地图作为背景图像。这个div必须有明确的尺寸（例如--ratio:2; width:100vw; height: calc (100vw * --ratio);，当然这里的比率是任意的，你将根据你的地图尺寸来计算它）。然后在这个容器内你相对地放置你的标志，以%

为单位