Чуйний Зображення зроблено легко з ResponsifyJS

Сучасна мережа повинна бути 100% чуйною, і нові бібліотеки роблять це все більш можливою.

З безкоштовними плагінами, такими як ResponsifyJS, ще простіше працювати з веб-сайтами на всіх пристроях. Це безкоштовний плагін jQuery приймає контейнер зображень і динамічно переставляє їх на основі різних розмірів екрана.

Оскільки різні контейнери тримати зображення по-різному, вони можуть змінювати розміри дуже дивно. Іноді ви отримуєте фотографії людей, а їхні обличчя можуть бути обрізані під час зміни розміру на мобільному телефоні.

Для вирішення цієї проблеми було створено плагін Responsify. Вона може працювати автоматично, але справжня магія полягає в визначення власної зони фокусування на малюнку.

Він використовує Внутрішня система десяткових описів щоб знайти місце фокусування зображення. Наприклад, ви можете визначити позиції як от data-focus-top котрий “блоків у” певний сегмент зображення.

Ці дані потрібно передати у вигляді десяткових знаків, наприклад, десяткові десяткові цілі 50% зображення (ліворуч / праворуч або зверху / знизу). Звичайно, це досить заплутано. Але, є безкоштовний додаток Responsify що дозволяє обчислити позиції динамічно у вашому браузері.

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

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

Цей плагін не є ідеальним рішенням для кожного проекту. Іноді ви хочу зображення для зміни розміру без фіксованих областей фокусування. Але, якщо ви використовуєте кладки сітки з jQuery не заважає додавати ResponsifyJS до стека.

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