Bootstrap中重叠图片响应式调整：保持位置与比例的实现方案求助

我现在遇到了一个Bootstrap响应式布局的问题，想实现重叠图片在窗口缩放时保持相对位置和比例一致，目前的代码在窗口缩小后，背景图会自适应，但上面的小图标（那些DIF_*的橙色点）位置和大小都没跟着适配，导致整体布局错乱。

现有HTML代码 #

<div class="d-flex justify-content-center">
  <div class="field-container img-overlay-wrap">
    <img src="media/FieldA.png" alt="Field" style="width:100%; opacity:50%">
    <img src="media/DIF_1_orange.png" alt="Point" class="mydif1" style="max-width:30px">
    <img src="media/DIF_2_orange.png" alt="Point" class="mydif2" style="max-width:30px">
    <img src="media/DIF_3_orange.png" alt="Point" class="mydif3" style="max-width:30px">
    <img src="media/DIF_4_orange.png" alt="Point" class="mydif4" style="max-width:30px">
    <img src="media/DIF_5_orange.png" alt="Point" class="mydif5" style="max-width:30px">
    <img src="media/DIF_6_orange.png" alt="Point" class="mydif6" style="max-width:30px">
    <img src="media/DIF_7_orange.png" alt="Point" class="mydif7" style="max-width:30px">
    <img src="media/DIF_8_orange.png" alt="Point" class="mydif8" style="max-width:30px">
    <img src="media/DIF_9_orange.png" alt="Point" class="mydif9" style="max-width:30px">
  </div>
</div>

现有CSS代码 #

.img-overlay-wrap {
  position: relative;
  display: inline-block; /* <= shrinks container to image size */
  transition: transform 150ms ease-in-out;
}
.img-overlay-wrap img { /* <= optional, for responsiveness */
  display: block;
  max-width: 100%;
  height: auto;
}
.img-overlay-wrap svg {
  position: absolute;
  top: 0;
  left: 0;
}
::deep .field-container {
  position: relative;
  width: 100%;
  max-width: 307px;
}
.field-container .mydif1 {
  position: absolute;
  top: 203px;
  left: 138px;
}
.field-container .mydif2 {
  position: absolute;
  top: 268px;
  left: 138px;
}
.field-container .mydif3 {
  position: absolute;
  top: 195px;
  left: 203px;
}
.field-container .mydif4 {
  position: absolute;
  top: 150px;
  left: 168px;
}
.field-container .mydif5 {
  position: absolute;
  top: 195px;
  left: 73px;
}
.field-container .mydif6 {
  position: absolute;
  top: 150px;
  left: 108px;
}
.field-container .mydif7 {
  position: absolute;
  top: 95px;
  left: 63px;
}
.field-container .mydif8 {
  position: absolute;
  top: 70px;
  left: 138px;
}
.field-container .mydif9 {
  position: absolute;
  top: 95px;
  left: 213px;
}

问题详情 #

当前效果：在窗口尺寸正常时，布局显示正常；但当窗口缩小后，背景图FieldA.png会按比例缩小，而所有带mydif*类的小图标还是用固定像素值定位和设置最大宽度，导致它们的位置相对于背景图偏移，大小也没有按比例缩小，整体视觉一致性被破坏。

我希望能不使用JavaScript的前提下，解决这个响应式适配问题，让小图标始终保持在背景图的正确相对位置，并且大小也跟着背景图的缩放比例自适应调整。有没有大佬能帮忙指点一下？

内容来源于stack exchange