Как сделать резиновую карту с метками?

Question

[mozzart_live]

Коллеги, добрый день!

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

Макетик: https://prnt.sc/l7164t

Comments

[Abdula Magomedov]

Метки кликабельны? Если нет, сразу на картинку нанеси в фотошопе

[mozzart_live]

Метки кликабельны

Answer 1

[Владимир Проскурин]

Создаете svg блок, указываете ему viewBox="0 0 ширина_картинки высота_картинки", в него кидаете картинку и все необходимые точки


UPD: вариант на css с сохранением размеров маркеров

Comments

[mozzart_live]

А есть идеи как грамотно сделать, чтобы фоновая картинка заполняла 100% ширины и 100% высоты?
Имитация full-screen карты

[Владимир Проскурин]

mozzart_live,

чтобы фоновая картинка заполняла 100% ширины и 100% высоты?

С потерей пропорций или с срезом лишнего? С потерей пропорций можете легко адаптировать мой пример на css, там достаточно указать для картинки высоту 100%

[mozzart_live]

Нее, в том то и соль, что со срезом лишнего.
Это же фотка местности, как никак :)

[Arris]

mozzart_live, livemap.wintersky.ru/map/winterland.hicksville

[mozzart_live]

Arris, это все круто конечно, но не могу представить как решить вопрос с фоновой картинкой (заполняемой весь экран)

Answer 2

[Nikita-Fast]

Ну я как обычно про SVG говорю
даже события можно повесить на разные маркеры разные события
только там не карта а фотка обычная
или надо отрисовать ?

Answer 3

[profesor08]

Располагать относительно при помощи % или vh, vw.

Comments

[mozzart_live]

Попробуйте сделать резиновую картинку с таким подходом :)

[profesor08]

mozzart_live, все размеры известны, проблем возникнуть не может. Да хоть фиксировано расставь все по картинке. Контейнер с результатом масштабируешь как угодно. Все.