定位销相对于图像映射

Question

我有一张图片，我想在其上放置一些地图图钉（类似于谷歌的图片）。但是，如果图像尺寸发生变化，我希望调整引脚位置。

可能的解决方案是什么？

Answer 1

如果地图要调整大小，但保持相同的比例，则使用百分比值进行相对和绝对定位很容易：

<div class="map">
    <div class="pin michigan"></div>
    <div class="pin california"></div>
    <div class="pin florida"></div>
    <div class="pin kansas"></div>
</div>​

.map {
    width: 500px; /* 250px */
    height: 300px; /* 150px */
    background: lightblue;
    position: relative;
}
.pin {
    position: absolute;
    width: 20px;
    height: 20px;
    background: salmon;
}
.michigan {
    top: 10%;
    right: 30%;
}
.california {
    top: 30%;
    left: 20%;
}
.florida {
    bottom: 20%;
    right: 10%;
}
.kansas {
    right: 50%;
    top: 50%;
}

Demo