Адаптивные изображения стали проще с ResponsifyJS
Современный веб должен быть на 100% отзывчивым, а новые библиотеки делают это все более возможным.
С бесплатными плагинами, такими как ResponsifyJSЕще проще заставить ваши сайты работать на всех устройствах. Этот бесплатный плагин jQuery берет контейнер изображений и динамически перестраивает их в зависимости от размера экрана.
Поскольку разные контейнеры содержат изображения по-разному, их размер может изменяться очень странным образом. Иногда у вас будут фотографии людей, а их лица могут быть обрезаны при изменении размера на мобильном телефоне.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Читайте также: Как использовать HTML5
Плагин Responsify был создан для решения именно этой проблемы. Он может работать автоматически, но настоящая магия заключается в определении собственной области фокусировки на изображении.
Он использует внутреннюю систему десятичных описаний, чтобы найти фокус изображения. Например, вы можете определить позиции, такие как data-focus-top, которые «блокируют» определенный сегмент изображения.
Эти данные должны быть переданы в виде десятичных разрядов, например, десятичный знак .5 предназначен для 50% изображения (слева / справа или сверху / снизу). Естественно, это довольно сложно сделать самостоятельно. Но есть бесплатный Приложение Responsify это позволяет вам динамически рассчитывать позиции в вашем браузере.
Просто загрузите изображение, определите область фокусировки, затем скопируйте / вставьте код изображения на свой сайт. Плагин Responsify будет иметь все данные, необходимые для правильного изменения размера изображения на маленьких экранах.
Вы можете найти немало живых демонстрационных ссылок в GitHub репо, включая фрагменты кода для копирования / вставки на ваш сайт.
Этот плагин не идеальное решение для каждого проекта. Иногда вы будете хотеть изображения для изменения размера без фиксированных зон фокусировки. Но если вы используете кладочные сетки с jQuery, не мешает добавить ResponsifyJS в ваш стек.
Чтобы узнать больше, посетите домашняя страница плагина для живой демонстрации, ссылки для скачивания и полного руководства по установке.
Читайте также: 5 методов подачи настоящих отзывчивых изображений
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)