带有标记的响应式地图（div 元素）

Question

大家 我对响应式地图有疑问（这只是图像而不是真实地图）。例如，我尝试在此地图上粘贴 div 元素：我的标记（div）在巴黎，但是当我调整窗口标记的大小时，标记在其他国家：D 我想为这个国家粘贴这个元素。我尝试这样：

HTML：

<div class="container-fluid map">
    <div class="circle"></div>
</div>

CSS：

.map {
    background-image: url(../images/only-map.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 500px;
    width: 100%;
    position: relative;
}

.circle {
    width: 10px;
    height: 10px;
    background-color: #fff;
    position: absolute;
    top: 200px;
    right: 400px;
    float: right;
}

我尝试使用绝对位置，固定。背景大小覆盖，包含，100% 100%，但仍然无法正常工作。

感谢每一个进步

Answer 1

你可以这样做：

HTML：

<div class="map rel">
   <div class="dot abs">
   </div>
</div>

CSS：

.map{
  width: 500px;
  height: 500px;
  background-color: blue;
}

.dot{
  width: 20px;
  height: 20px;
  background-color: red;
}

.rel{
  position: relative;
}

.abs{
  position: absolute;
  top: 8px;
  left: 8px;
}

您可以使用它here。希望对您有所帮助。

Answer 2

你需要使用百分比的位置

.circle {
    position: absolute;
    top: 40%;
    left: 50%;
}

但请记住，您的圈子将以角为中心，您可以通过调整百分比和设置来防止这种情况发生：

.circle {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%); //else only the upper-left corner of the circle div will be centered on paris)
}

正如人们所说，在没有看到实际图像和结果的情况下总是很难提供帮助，但这可能会奏效