Imagini receptive făcute ușor cu responsabilitate

Web-ul modern trebuie să fie 100% receptiv și bibliotecile mai noi fac din ce în ce mai posibilă acest lucru.

Cu pluginuri gratuite, cum ar fi ResponsifyJS, este chiar mai ușor să obțineți site-urile dvs. de lucru pe toate dispozitivele. Acest plugin gratuit jQuery ia un container de imagini și dinamic le rearanjează pe baza unor dimensiuni diferite ale ecranului.

Din diferite containere țineți imaginile în mod diferit, ei pot redimensiona în moduri foarte ciudate. Uneori, veți avea fotografii de persoane și fețele lor pot fi tăiate atunci când sunt redimensionate pe telefonul mobil.

Pluginul Responsify a fost creat pentru a rezolva această problemă exactă. Poate funcționa automat, dar magia adevărată se află în definind zona proprie de focalizare pe imagine.

Folosește un sistem intern de descrieri zecimale pentru a afla unde ar trebui să se concentreze imaginea. De exemplu, puteți defini pozițiile precum date-focus-top care “blochează în” un anumit segment al imaginii.

Aceste date trebuie să fie transmise sub formă de zecimale, de exemplu, o .5 zecimale vizează 50% din imagine (stânga / dreapta sau sus / jos). Firește, acest lucru este destul de confuz de făcut de unul singur. Dar, e a aplicație cu responsabilitate gratuită care vă permite calculați dinamic pozițiile în browserul dvs..

Doar încărcați o imagine, definiți zona de focalizare, apoi copiați / inserați codul imagine în site-ul dvs. Web. Pluginul Responsify va avea toate datele necesare pentru redimensionarea corectă a imaginii pe ecrane mai mici.

Puteți găsi destul de puține live link-uri demo în repo GitHub, inclusiv fragmente de cod pentru a copia / lipi pe site-ul dvs..

Acest plugin nu este soluția perfectă pentru fiecare proiect. Uneori, vei face asta vrei imagini pentru redimensionare fără zone de focalizare fixe. Dar dacă utilizați zidărie cu jQuery nu este rău să adăugați ResponsifyJS la stack-ul tău.

Pentru a afla mai multe, accesați pagina principală a pluginului pentru o demonstrație live, un link de descărcare și un ghid complet de configurare.