修复响应图像上的位置图像答案

【问题标题】：Fixed position images on responsive image修复响应图像上的位置图像
【发布时间】：2020-10-11 13:12:41
【问题描述】：

我有一张地图的响应式图片。在该地图之上，我想添加一些图钉。当屏幕尺寸改变时，这些引脚不能改变位置。我已经尝试了很多东西，但是当屏幕尺寸改变时，引脚会不断改变位置。有人知道我该如何解决这个问题吗？提前致谢！

<div style="width: 100%; height: 100%; position: relative">
        <div style="width: 100%; height: auto; position: absolute">
            <img src="worldmap.png" style="max-width: 100%; width: 100%">
        </div>
        <div style="position: absolute; top: 40px; left: 100px; width: 100%; height: auto">
            <img src="pin.png" style="max-width: 5%; top: 50px; left: 100px">
        </div>
    </div>

【问题讨论】：

尝试在父 div 上设置一个固定的宽度和高度，而不是 100%
@Daniel_Knights 我想让图像（世界地图）保持响应
@Daniel_Knights 您的评论已被删除。我试过你的代码，但在这里你可以看到当我在桌面和移动设备上查看时坐标发生了变化：imgur.com/a/dDGNwh6
这就是我删除它的原因。这是一个好问题，似乎应该有一个简单的答案，但我也想不通
我不认为没有特定的纬度/经度坐标可以做到这一点。可能值得一试 plotly.js：plotly.com/javascript/scattermapbox

标签： html css image responsive

【解决方案1】：

请允许我解释一下这个问题-

这里有一张响应式图片，因为它在 % 尺寸中。
您有一个绝对放置在图像上方的图钉。
（主要问题）与地图相比，图钉将改变其位置，因为它的位置是固定值，左侧和顶部，并且这些值永远不会随着地图图像的大小变化或百分比变化而改变屏幕尺寸的变化。
（答案）只需根据百分比% 定义该引脚图像的left 和top 值，然后引脚将根据屏幕尺寸改变位置，但仍将保持在与与其他元素相比。

请让我知道您遇到的任何问题，并随时要求更深入的解释。

<div style="width: 100%; height: 100%; position: relative">
    <div style="width: 100%; height: auto; position: absolute">
        <img src="worldmap.png" style="max-width: 100%; width: 100%">
    </div>
    <div style="position: absolute; top: 10%; left: 25%; width: 100%; height: auto">
        <img src="pin.png" style="max-width: 5%; top: 50px; left: 100px">
    </div>
</div>

【讨论】：

感谢您的回答。我现在明白了这个问题。但是，当我重新调整窗口时，引脚仍然会改变坐标。（如果我沿对角线缩放，这很完美。但是当我只调整屏幕宽度/高度时，坐标不再位于地图上的同一位置）。
发生这种情况是因为不同设备上的宽度和高度不同，它们的比例也不同，这就是为什么我们都只考虑 1 个维度，也就是宽度，所以把你所有的值都放在width by vw 然后坐标在每个设备上都可以正常工作，即使使用宽度/高度进行调整

【解决方案2】：

尝试使用transform: translate(%, %) 并让它们共享同一个父div：

body {
  width: 100%;
  height: 100%;
}

#map {
  width: 100%;
  height: 100%;
  position: relative;
  resize: both;
  overflow: auto;
}

img:nth-of-type(1) {
  max-width: 5%;
  transform: translate(400%, 100%);
  position: absolute;
}

img:nth-of-type(2) {
  width: 100%;
}

<body>
  <div style="width: 100%; height: 100%; position: relative">
    <div id="map">
      <img src="http://www.apexdancestudio.com/wp-content/uploads/2018/01/map-pin-png-6.png" />
      <img src="https://cyberconceptslk.com/demo/wp-content/uploads/2018/04/World-Map-PNG-Photos.png" />
    </div>
  </div>
</body>

这样图钉会根据父元素重新定位，与调整地图大小相同。

【讨论】：

这就像一个魅力！非常感谢@Daniel_Knights
终于到了！