使用引导框架

Question

我有一个“地图”，它基本上只是.png格式的一行（附上一个示例图片）。我在css中使用了一个红点，我想在地图上叠加。我使用javascript根据函数改变点的位置。

我的问题是我无法弄清楚如何使点与引导程序兼容。例如当浏览器大小改变时，地图和点一起移动。

点将基于使用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

＆＃13;

＆＃13;

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

＆＃13;

<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="https://i.stack.imgur.com/VjwsQ.png" alt="Map" class="img-fluid" style="width:100%;">
  <div class="reddot">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;