Запретить обрезку разделов галереи полной ширины в Squarespace 7.1
Автор: Will Myers
Загружено: 2022-02-20
Просмотров: 5411
Код: https://will-myers.com/articles/respo...
/* ==== ОПИСАНИЕ ==== */
Изображения полной ширины в разделах галереи в Squarespace 7.1 обрезаются в зависимости от устройства, на котором вы их просматриваете. В этом руководстве я расскажу, как сделать разделы галереи адаптивными с помощью одной строки кода.
/* ==== ИСПОЛЬЗОВАНИЕ ==== */
Добавьте на свою страницу новый раздел галереи с изображениями. Убедитесь, что тип галереи установлен как «Слайд-шоу: Полная».
Скопируйте код с моего сайта и вставьте его в раздел «Дизайн» » «Пользовательский CSS». Обязательно замените значение data-section-id на конкретный data-section-id вашего раздела галереи. Используйте поиск идентификатора раздела Squarespace (ссылка ниже).
В функции clamp() первое значение, 0px, — это минимальная высота раздела. Второе значение, 56.25vw, — это предпочтительная высота раздела. Это значение нужно изменить, чтобы задать соотношение сторон. Третье значение — максимальная высота раздела.
Я выбрал 56.25vw в качестве предпочтительной высоты, поскольку это соотношение сторон изображения 16:9.
56.25vw получается путём деления 9 на 16 и умножения на 100vw. Вы можете изменить это значение, чтобы оно соответствовало желаемому соотношению сторон.
/* ==== ДОПОЛНИТЕЛЬНЫЕ ССЫЛКИ ==== */
Магазин плагинов: https://www.will-myers.com/products
Подробнее: https://www.will-myers.com/newsletter
Новостная рассылка: https://www.will-myers.com/learn-css-...
Поиск идентификатора SS: https://www.will-myers.com/id-finder
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке: