Как позиционировать элементы для сопоставления с фоном в дальнейшем при адаптивности?

Question

[Артур]

Добрый день, интересуент верное решение, как правильно позиционировать элементы которые должны сочетаться с фоновым изображением?
Есть кусок макета

изображение

Точки на верщинах гор анимированно пульсируют.
Как правильно расположить текстовые элементы и эти вершины при адаптивности?
При изменении ширины окна все едет(
Абсолютно позиционировать каждый элемент через медиа запросы и использовать картинку с другим разрешеним под разные экраны?

Answer 1

[PiggyPig]

Примерно как-то так:

https://jsfiddle.net/37f6g2ho/2/

В примере уменьшайте ширину (именно ширину) окна результата.

Останется только поиграться со значениями процентов для отступов, чтобы попасть в вершины. Если нужно пропорционально уменьшать размеры точек, то поиграйтесь и с процентами их ширины и высоты.
Зная ширину и высоту фоновой картинки, делите ширину на высоту - получаете соотношение, и потом, задав произвольное значение ширины точки, умножаете на соотношение и получаете нужную высоту и, соответственно, ровный круг :)

Немного заморочно, зато математику вспомните)