Зафиксировать элемент при изменении окна браузера

Question

Нужно, чтобы при изменении размера окна браузера, элемент оставался на той же точке фонового изображения. Пример на скрине обведен красным цветом. Заранее благодарю!

Answer 1

Как-то давно писал похожее, суть в том, чтобы располагать эти "маркеры" именно через процентное соотношение, относительно изображения.
В таком случае при изменении размера изображения "маркеры" будут менять своё положение пропорционально.
Из минусов, если изображение должно меняться, тогда позицию "маркеров" тоже потребуется "пересчитать".

.image-areas {
  display: inline-block;
  max-width: 100%;
  position: relative;
}

.image-areas>img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0;
}

.image-areas-marker {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.075);
  background-image: radial-gradient(circle at center, #fff 5px, transparent 5.25px);
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  position: absolute;
  transform: translate(-50%, -50%);
  transition: transform .3s ease;
  cursor: pointer;
}

.image-areas-marker:hover {
  transform: translate(-50%, -50%) scale(1.25);
}

<div class="image-areas">
  <img src="https://i.imgur.com/4wUu599.png" />
  <div class="image-areas-marker" style="left: 23%; top: 55%;"></div>
  <div class="image-areas-marker" style="left: 88%; top: 18%;"></div>
  <div class="image-areas-marker" style="left: 52.5%; top: 75%;"></div>
</div>

БЛОГ НА HUSL

Зафиксировать элемент при изменении окна браузера

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