使用 Bootstrap 框架在图像上叠加 CSS 点

Question

我有一张“ map ”，它基本上只是 .png 格式的一行(附有示例图片)。我在我想覆盖在 map 上的 css 中使用了一个红点。我使用 javascript 根据函数更改点的位置。

我的问题是我不知道如何使点与 Bootstrap 兼容。比如当浏览器尺寸改变时， map 和点一起移动。

红点将根据使用 JS 函数计算出的百分比沿线移动，因此如果函数输出 10%，则红点将位于蓝线的 10% 处。

.reddot {
    height: 25px;
    width: 25px;
    background-color: #D03C3C;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: 300px;
    left: 300px;
}

<div style="position: relative; left: 0; top: 0;">
      <img src="/imgs/map.png" alt="Map" style="width:100%;">
      <div class="reddot">
      </div>
</div>

Answer 1

在调整大小和定位时使用 vw 而不是 px

.reddot {
  height: 4vw;
  width: 4vw;
  background-color: #D03C3C;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  top: 20vw;
  left: 20vw;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="position: relative; left: 0; top: 0;">
  <img src="/image/VjwsQ.png" alt="Map" class="img-fluid" style="width:100%;">
  <div class="reddot">
  </div>
</div>