javascript - 保持 div 相对于图像定位

Question

我正在尝试在城市上创建一个带有 div 的“ map ”。我得到了 .svg 格式的 map ，并将其用作背景大小的背景:封面。我需要“city-divs”相对于图像保持定位(例如伦敦 div 应该始终在我图像上的伦敦位置上方)。我可以半实现这个使“城市 div”成为绝对，然后使用 vh 和 vw 定位它。但是，如果我调整窗口大小或在不同的计算机上检查，它就会出错。

我想纯 css 不是执行此操作的正确方法。有没有办法实现这一目标，或者我的方向完全错误？

我最接近的是使用在 stackoverflow 上找到的这个解决方案 http://jsfiddle.net/fmenrd4z/ .这适用于图像中心的 div 恰到好处。向左/向右放置更多的 Div 效果不佳。

目前，我正在使用此代码。

HTML

<section id="map">
  <div id="london">london</div>
  <div id="paris">paris</div>
</section>

CSS

#map {
    background-image: url(../img/maps/map.svg);
    width: 100vw;
    height: 90vh;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#london {
    position: absolute;
    left: 31vw;
    top: 35vh;    
}
#paris {
    position: absolute;
    left: 60vw;
    top: 73vh;    
}

我想这个问题一定有解决方案。我今天一整天都在网上搜索，但没有找到任何东西。

我愿意选择完全不同的方式来做到这一点。 (是否有一些 javascript 库等？) 提前致谢!

Answer 1

这永远行不通，因为您定位的 div 尺寸总是根据显示的屏幕而变化。

有一种方法可以为大屏幕提供固定的 #map 部分的高度和宽度(以像素为单位)，并为移动屏幕添加一些媒体查询。

#map {
    width: 600px;
    height: 300px;
}

@media (max-width: 1024px){
    #map {
        width: 300px;
        height: 150px;
    }
}