Адаптивные изображения стали проще с ResponsifyJS

Современный веб должен быть на 100% отзывчивым, а новые библиотеки делают это все более возможным.

С бесплатными плагинами, такими как ResponsifyJSЕще проще заставить ваши сайты работать на всех устройствах. Этот бесплатный плагин jQuery берет контейнер изображений и динамически перестраивает их в зависимости от размера экрана.

Поскольку разные контейнеры содержат изображения по-разному, их размер может изменяться очень странным образом. Иногда у вас будут фотографии людей, а их лица могут быть обрезаны при изменении размера на мобильном телефоне.

Читайте также: Как использовать HTML5 получить отзывчивое изображение (обновлено)

Плагин Responsify был создан для решения именно этой проблемы. Он может работать автоматически, но настоящая магия заключается в определении собственной области фокусировки на изображении.

Он использует внутреннюю систему десятичных описаний, чтобы найти фокус изображения. Например, вы можете определить позиции, такие как data-focus-top, которые «блокируют» определенный сегмент изображения.

Эти данные должны быть переданы в виде десятичных разрядов, например, десятичный знак .5 предназначен для 50% изображения (слева / справа или сверху / снизу). Естественно, это довольно сложно сделать самостоятельно. Но есть бесплатный Приложение Responsify это позволяет вам динамически рассчитывать позиции в вашем браузере.

Просто загрузите изображение, определите область фокусировки, затем скопируйте / вставьте код изображения на свой сайт. Плагин Responsify будет иметь все данные, необходимые для правильного изменения размера изображения на маленьких экранах.
Вы можете найти немало живых демонстрационных ссылок в GitHub репо, включая фрагменты кода для копирования / вставки на ваш сайт.

Этот плагин не идеальное решение для каждого проекта. Иногда вы будете хотеть изображения для изменения размера без фиксированных зон фокусировки. Но если вы используете кладочные сетки с jQuery, не мешает добавить ResponsifyJS в ваш стек.

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

Читайте также: 5 методов подачи настоящих отзывчивых изображений