Zodpovedajúce obrázky sa jednoducho robili s ResponsifyJS

Moderný web by mal byť 100% citlivý a novšie knižnice to robia čoraz častejšie.

S bezplatnými doplnkami, ako sú ResponsifyJS, je dokonca jednoduchšie získať vaše webové stránky pracujúce na všetkých zariadeniach. toto free jQuery plugin má kontajner s obrázkami a dynamicky ich upravuje založené na rôznych veľkostiach obrazovky.

Od rôznych kontajnerov držať obrázky inak, môžu zmeniť veľkosť veľmi zvláštne. Niekedy budete mať fotografie ľudí a ich tváre sa môžu odrezať pri zmene veľkosti v mobile.

Nástroj Responsify bol vytvorený na vyriešenie tohto konkrétneho problému. Môže to fungovať automaticky, ale v ňom leží pravá kúzla definovanie vlastnej oblasti zaostrenia na obrázku.

Používa interný systém desatinných popisov aby ste zistili, kde by mal byť zameranie obrazu. Napríklad, môžete definovať pozície ako napr Data-focus-top ktorý “bloky v” určitý segment obrazu.

Tieto údaje je potrebné odovzdať vo forme desatinných miest, napríklad .5 desatinné ciele 50% obrazu (vľavo / vpravo alebo hore / dole). Samozrejme, je to dosť mätúce. Ale existuje a free Responsify app to vám umožní dynamicky vypočítajte pozície v prehliadači.

Stačí nahrať obrázok, definovať oblasť zaostrenia a potom skopírovať / prilepiť obrázok na svoj web. Zásuvný modul Responsify bude mať všetky údaje, ktoré potrebuje na správnu zmenu veľkosti obrazu na menších obrazovkách.

Nájdete tu celkom málo živé demo odkazy v repo GitHub vrátane úryvkov kódu na kopírovanie / prilepenie na vaše stránky.

Tento plugin nie je dokonalým riešením pre každý projekt. Niekedy to bude chcieť obrázky na zmenu veľkosti bez pevných oblastí zaostrenia. Ale ak používate murivo mriežky s jQuery to neškodí pridať ResponsifyJS do vášho stohu.

Ak chcete získať viac informácií, navštívte domovskú stránku pluginu pre živé ukážky, odkaz na stiahnutie a úplnú sprievodcu nastavením.