Как спозиционировать относительно фона, чтобы избежать смещения при уменьшении ширины?

Question

[TyllerDurden]

Смотрите. Есть карта, которая представляет собой просто картинку. А есть точки, расположенные поверх карты, по которым будет происходить клик и срабатывать разный скрипт. Проблема в том, что при уменьшении экрана уменьшается и картинка с картой. Соответственно точки смещаются и вот уже какая-нибудь точка, ответственная за Беларусь, находится в другом месте. Я решил проблему следующим образом. Сначала позиционирую точки, а потом, когда экран сужается до момента, когда начинает сужаться картинка, через медиа запросы прописываю примерно следующее

.point{
    margin-top: 4vw;
    margin-left: 20vw;
}

На совсем маленьких экранах приходится прописывать новый медиа запрос и корректировать положение точек. Такой вариант реализации рабочий, но мне кажется каким-то костыльным. Есть ли более красивый и чистый способ?

Comments

[Ankhena]

но мне кажется каким-то костыльным

Ну да.

Есть ли более красивый и чистый способ?

Посчитать положение точки нормально, с учетом размера самого маркера и положения его центра.
Обычно в этом помогает transform. (Вспомните, как вы центрируете элементы абсолютами)

[Вадим]

зависит от другой разметки и как оно "адаптируется".
Я в подобной задаче позиционировал через absolute и проценты.

[Максим]

Можно просто реализовать всю эту штуку в SVG и ни каких дополнительных манипуляций не потребуется