Как сделать, чтобы красные круги оставались на одних и тех же местах при изменении ширины экрана?

Question

Есть блок с картинкой и красные точки. Мне нужно, чтобы точки оставались на одних и тех же местах при изменении ширины экрана.

Высота блока на 768px должна быть 500px, а на компе 854px. Сейчас на десктопе вроде не смещаются круги, а на адаптиве совсем плохо.

Подскажите, как правильно верстать такие блоки? Расположение точек задается в html через style в процентах. Спасибо за ответ.

https://jsfiddle.net/IvanGrishov/97gsq4px/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.boiler {
  position: relative;
  padding-bottom: 56%;
}
.boiler .boiler__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.boiler .boiler__background img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dots {
  width: 100%;
  height: 100%;
  position: absolute;
}

.dots-item {
  width: 24px;
  height: 24px;
  background: deeppink;
  border-radius: 50%;
  position: absolute;
  cursor: pointer;
}

@media (max-width: 768px) {
  .boiler {
    height: 500px;
  }
}

<section class="boiler">
  <div class="boiler__background">
    <img src="https://i.ibb.co/7CZtT0q/fe33e8c97bdbce1.png" alt="fe33e8c97bdbce1" border="0">
    <div class="boiler__dots dots">
      <div class="dots-item" style="top: 10%; left: 64%"></div>
      <div class="dots-item" style="top: 19%; left: 61%"></div>
      <div class="dots-item" style="top: 38%; left: 40%"></div>
    </div>
  </div>
</section>

БЛОГ НА HUSL

Как сделать, чтобы красные круги оставались на одних и тех же местах при изменении ширины экрана?

Ответы (0 шт):