Question

我正在尝试用城市上的div创建一个“地图”。我得到了.svg格式的地图，并将其用作background-size：cover的背景。我需要“ city-divs”保持相对于图片的位置（例如，伦敦div应该始终在图片上的伦敦位置上方）。我可以将“ city divs”定为绝对值，然后使用vh和vw对其进行定位，以达到一半。但是，如果我调整窗口大小或在其他计算机上检查，则会搞砸。

我想纯CSS不是这样做的正确方法。有办法实现这一目标，还是我走错了方向？

我最近得到的是使用在stackoverflow http://jsfiddle.net/fmenrd4z/上找到的此解决方案。这适用于图像中心的divs大约正确。向左/向右跳更多的效果就不好了。

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

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;
    }
}

保持div相对于图片的位置

1 个答案: