如何＆＃34;胶水＆＃34;要调整图像的元素？

Question

我有name的图片，在此图片上是width: 100%; height: auto;的其他元素（这是游戏）。

当我调整页面大小时，元素没有移动（它搞乱了），所以我写了这个：

position: absolute; left: x; top: x;

但它没有正确地工作，这里是简短的GIF代表发生的事情：

A＆＃34;红点＆＃34;正在快速移动。

// EDDIT！ JSFiddle与整个项目https://jsfiddle.net/BrunonDEV/18mqyd8r/1/

我做错了什么？

Answer 1

我不会尝试重新定位JS中的那些 - 它很慢，调整janky大小，并且咀嚼你实际运行游戏所需的javascript周期，并且它是反正没必要。为什么不将你的点位置设置为％，如下所示：

＆＃13;

＆＃13;

.map {
  background: #68B1FF url('https://upload.wikimedia.org/wikipedia/commons/5/5e/BlankMap-World-Sovereign_Nations.svg') center top no-repeat;
  background-size: contain;
  position: relative;
  height: 0;
  padding-top: 51.2%; /* The original map image is 1104 x 566px. This is the aspect ratio as a percentage of height to width */
  width: 100%;
}

.marker {
  border-radius: 50%;
  width: 1vw; /* These allow the markers to scale with the map */
  height: 1vw;
  background: red;
  min-height: 8px;
  max-height: 16px;
  min-width: 8px;
  max-width: 16px;
  position: absolute;
}

＆＃13;

<div class="map">
  <div class="marker" style="top: 20%; left: 33%;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

其中一个重要部分是fixed aspect ratio boxes in CSS - 如果您将高度设置为0，并将填充顶部（或底部）设置为百分比，则填充高度将计算为 width <的百分比/ em>，而不是你所期望的高度。

对于奖励积分，您应该使用SVG地图图像 - 然后它也会干净地缩放。