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

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

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

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

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

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

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

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

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

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

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