Хочу сделать из фотографии одной картины модульную картину из 5 частей с помощью clipPath
Как бы получается, но в адаптивной верстке все едет: картинка адаптируется, части нет.
Как зафиксировать картинку в каждой части при изменении размера окна?
https://jsfiddle.net/aq9Laaew/31565/
.modular{clip-path:url(#modular)}
.modular{max-height: 80vh; max-width: 100%; display: block; margin: 15px auto;}
Ответ
Чтобы приложение было адаптивно и не разрушались пропорции между фрагментами изображения необходимо сделать следующее:
Изображение добавить внутрь svg с помощью команды
.container {
width:100%;
height:100%;
}
Приложение полностью адаптивно и работает во всех браузерах
Комментариев нет:
Отправить комментарий