Отзивчивите снимки станаха лесни с ResponsifyJS

Модерният уеб трябва да бъде 100% реагиращ и новите библиотеки правят това все по-възможно.

С безплатни приставки, като ResponsifyJS, още по-лесно е да направите уебсайтовете си на всички устройства. Това безплатно jQuery плъгин взема контейнер с изображения и динамично ги пренарежда въз основа на различни размери на екрана.

От различни контейнери държат изображенията по различен начин, те могат да променят размера си по много странни начини. Понякога ще имате снимки на хора и техните лица могат да бъдат отрязани, когато се преоразмеряват на мобилни устройства.

Приставката Responsify е създадена, за да се реши този точно проблем. Тя може да работи автоматично, но истинската магия е в нея определяне на вашата област на фокусиране на снимката.

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

Тези данни трябва да бъдат предадени под формата на десетични знаци, например .5 десетични цели 50% от изображението (ляво / дясно или отгоре / отдолу). Естествено, това е доста объркващо. Но има безплатно приложение за Responsify което ви позволява изчислява динамично позициите в браузъра си.

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

Можете да намерите доста живи демо връзки в репо GitHub, включително кодови фрагменти, за да копирате / поставите в сайта си.

Този плъгин не е идеалното решение за всеки проект. Понякога ще искам изображения за промяна на размера без фиксирани области на фокусиране. Но ако използвате зидани решетки с jQuery не боли да добавите ResponsifyJS към стека.

За да научите повече, посетете началната страница на приставката за демонстрация на живо, връзка за изтегляне и пълно ръководство за настройка.