Как сделать адаптивную карту изображений?

Question

[Любчик]

Необходимо сделать адаптивную карту с иконками. При наведении на иконку появляется подсказка. Иконок много, и расположены они по-разному. На картинке показан лишь кусочек. Есть какие-то предположения как это можно реализовать?)

Answer 1

[Вадим Белкин]

Расположение элементов (иконок) и размеры указать в процентах, относительно размеров всей карты. Само изображение (фоном или через img) растягивать по ширине контейнера соответственно, резиновым. Думаю ничего сложного в данном методе нет. На мобильных, если не хочется ужимать карту, чтобы все хорошо читалось и просматривалось, можно сделать overflow: auto для контейнера, а самой карте какие-то размеры, можно будет её скролить внутри контейнера.

Comments

[Вадим Белкин]

jsfiddle.net/8otgt16t Небольшой пример по Вашей карте. Контейнер всегда 100%, блок карты 100%, но минимальная ширина 400px, что не дает её сильно сжимать и позволяет скролить (можно убрать минимальную ширину, тогда будет резиновая полностью). Вместо иконок блоки оранжевые добавил (два для пример), размеры и положения в процентах, пропорционально самой карте.

[Любчик]

Спасибо большое! Попробую сейчас)