html - 当浏览器窗口调整大小时，在图像顶部保持 'pins' 的位置

Question

我有一张图片，我想在上面放置一些“图钉”。我知道如何在图像上获取图钉，但问题是当调整浏览器大小时，图像会缩放但图钉不会保持匹配/停留在所需位置的顶部。

有人有此类功能的示例吗？

Answer 1

是的。您发布的 fiddle 是正确的。必须将图像包装到带有

的元素中

position: relative;
display: inline-block;

然后在里面你也把别针放在:

position: absolute;
top: 50%;
left: 50%;

然后根据您希望放置它们的位置调整顶部和左侧。