@PHPjedi

Как добавить адаптивности интерактивной карте?

Добрый день.

Хочу добавить адаптивности к блоку с svg элементами и изображением.

Здесь можете увидеть интерактивную карту которую я реализовал.
За исключением некоторых неровностей path`ов, все ОК.



Расскажу немного о проблемке.

Я хочу масштабировать изображение на весь экран, как это реализовано здесь:

a3ZPtgO3ivk.jpgA_TzDeM9uOc.jpgNwRWe62yCS0.jpg

В этом примере изображение на весь экран, и можно заметить, что тут край изображения немного срезаны по сравнению с мои примером.

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

Когда я увеличиваю изображение, SVG элементы перестают попадать по этажам, по прописанным путям.

Я изучил оригинал, и нашел там такой div который видимо всем управляет. <SVG/> и <IMG/> находятся внутри этого DIV.

Тот самый div
<div class="resizable div_100" style="width: 1605.33px; height: 903px; top: 0px; left: -440.167px;">


Я полагаю, что все дело в div, который при изменении размера экрана автоматически меняет и свои стили.



Как мне увеличить изображение на весь дисплей, но при этом сделать так, чтобы SVG элементы совпадали?

Очень прошу Вас мне помочь. Буду очень признателен!


Заранее большое Спасибо!
  • Вопрос задан
  • 150 просмотров
Пригласить эксперта
Ответы на вопрос 1
lamer350
@lamer350
กำลังสูงสุด
А что вам мешает засунуть изображение внутрь SVG отдельным слоем? тогда масштабирование изображения будет происходить параллельно с патчами, а манипуляция размером изображения вообще не вызовет никаких сложностей.
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы