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

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

Точки на верщинах гор анимированно пульсируют.
Как правильно расположить текстовые элементы и эти вершины при адаптивности?
При изменении ширины окна все едет(
Абсолютно позиционировать каждый элемент через медиа запросы и использовать картинку с другим разрешеним под разные экраны?
  • Вопрос задан
  • 244 просмотра
Решения вопроса 1
@PiggyPig
Примерно как-то так:

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

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

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

Немного заморочно, зато математику вспомните)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы