Immagini reattive semplificate con ResponsifyJS

Il web moderno dovrebbe essere al 100% reattivo e le nuove biblioteche stanno rendendo questo sempre più possibile.

Con plugin gratuiti, come ResponsifyJS, è ancora più facile far funzionare i tuoi siti web su tutti i dispositivi. Questo plugin gratuito jQuery prende un contenitore di immagini e li riorganizza dinamicamente in base a diverse dimensioni dello schermo.

Poiché diversi contenitori tenere le immagini in modo diverso, possono ridimensionarsi in modi molto strani. A volte, le foto delle persone e dei loro volti possono essere tagliate quando vengono ridimensionate sui dispositivi mobili.

Il plugin Responsify è stato creato per risolvere questo problema esatto. Può funzionare automaticamente ma la vera magia si trova dentro definendo la tua area di messa a fuoco sull'immagine.

Usa un sistema interno di descrizioni decimali per trovare dove dovrebbe essere il focus dell'immagine. Ad esempio, puoi definire le posizioni ad esempio Dati-focus-top quale “blocchi dentro” un certo segmento dell'immagine.

Questi dati devono essere passati sotto forma di decimali, per esempio un .5 decimale bersaglia il 50% dell'immagine (sinistra / destra o alto / basso). Naturalmente, questo è abbastanza confuso da fare da soli. Ma c'è un App gratuita Responsify questo ti fa calcolare le posizioni in modo dinamico nel tuo browser.

Basta caricare un'immagine, definire l'area di messa a fuoco, quindi copiare / incollare il codice dell'immagine nel tuo sito web. Il plugin Responsify avrà tutti i dati necessari per ridimensionare correttamente l'immagine su schermi più piccoli.

Ne puoi trovare parecchi collegamenti demo live nel repository GitHub, inclusi frammenti di codice da copiare / incollare nel tuo sito.

Questo plugin non è la soluzione perfetta per ogni progetto. A volte, lo farai volere immagini da ridimensionare senza aree di messa a fuoco fisse. Ma se stai usando griglie in muratura con jQuery non fa male aggiungere ResponsifyJS al tuo stack.

Per saperne di più, visita la homepage del plugin per una demo dal vivo, un link per il download e una guida completa alla configurazione.