Выделение областей на изображении js+html+адаптив, как правильно реализовать?

Question

[Владимир Кащев]

В общем есть такая задача на общем плане квартир - сделать чтобы подсвечивались отдельно каждая квартира.
sokol174.ru/planirovki-kvartir
вот тут реализовал.
сделано через map.

минусы - оно не адаптивно, получается на меньших экранах приходится делать скролинг горизонтальный.

подскажите как можно сделать чтобы фото могло уменьшаться под размер экрана и контуры тоже под это подстраивались.

буду рад любым советам.

Comments

[Rustam Bainazarov]

Сейчас это делается на SVG и JS (опционально, зависит от задачи).

[Rustam Bainazarov]

https://websitebeaver.com/how-to-make-an-interacti...

[Дмитрий]

посмотрите этот вариант - https://github.com/davidjbradshaw/image-map-resizer

[SerzN1]

могу написать скрипт который все тоже самое будет переводить на масштабируемый канвас, вопрос в том что на мобилке все будет очень мелко и текущий подход не прокатит