Question

我试图为游戏设置和交互式地图，我有一个奇怪的问题，我不知道如何解决。我已经将html和css简化为导致问题的部分，以便您可以更好地理解。出于某种原因，如果您水平调整浏览器窗口的大小，地图上的图标会略微改变相对于地图的位置。在此示例中，移动看起来不是太糟糕但是对于我的项目，屏幕会放大，这会使图标变为图标位置跳跃非常明显和有问题。由于该位置是使用百分比相对于父母完成的，因此我不了解它如何改变相对于父母的位置。在代码中，将图标移动17.5像素的变换矩阵只是使图标以该位置为中心而不是在那里左上角。我已经尝试删除它以查看它是否导致了问题，但它没有修复它所以我保留它以获取示例代码：

＆＃13;

#region {
  position: absolute;
}

#wrapper {
  width: 70%;
  height: 500px;
  position: absolute;
}

#mapImg {
  width: 100%;
}

#icons {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.icon {
  width: 35px;
  height: 35px;
  position: absolute;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

＆＃13;

<body>
  <div id="wrapper">
    <div id="region">
      <img src="http://www.resourcemapmaker.com/images/SoTMap.jpg" alt="map" id="mapImg">
      <div id="icons">
        <img class="icon" src="http://www.resourcemapmaker.com/mapIcons/default.png" alt="icon" style="top: 50%; left:50%; transform: matrix(1,0,0,1,-17.5,-17.5);">
      </div>
    </div>
  </div>
</body>

＆＃13;

为什么元素在父级调整大小期间会改变相对位置？

0 个答案: