Редизайн детского игрового аттракциона в торговом центре
Требуется доработать существующий дизайн-проект детской игровой зоны. Необходимо внести правки в текущий проект и создать новый визуальный концепт.
Описание проекта
Сайт-каталог. На странице продукта установлена библиотека PhotoSwipe Lightbox 5.4.4. В слайдере используются изображения с разным соотношением сторон.
Проблема
В базовой поставке шаблона в режиме просмотра галереи (Lightbox) изображения отображаются в неподходящей пропорции (чаще всего портретной ориентации) и искажаются: сжимаются или растягиваются.
Что было сделано заказчиком
- В HTML-разметке изменены атрибуты
data-pswp-width="1500"иdata-pswp-height="1000"для нормализации пропорций. - Тем не менее, поведение лайтбокса осталось некорректным - требуется тонкая донастройка логики библиотеки (JavaScript/CSS).
Требуется
- Исправить работу PhotoSwipe так, чтобы изображения любых пропорций (горизонтальные, вертикальные, квадратные) отображались корректно, без потери размера или сжатия.
- Обеспечить автоопределение естественного размера картинки (если атрибуты
data-pswp-width/heightзаданы верно или читаются из WxH файла). - Исключить любые CSS-искажения при открытии модального окна (слайдер должен соблюдать пропорции как в обычном
<img>сobject-fit: contain).
Окружение
PhotoSwipe версии 5.4.4, PHP-шаблон (битрикс/универсальный движок). Решение должно фиксить логику внутри JS (и/или дополнительных CSS) и затрагивать только компонент просмотра.