Responsive Images Made Easy med ResponsifyJS

Den moderna webben ska vara 100% responsiv och nya bibliotek gör det allt mer möjligt.

Med gratis plugins, t.ex. ResponsifyJS, Det är ännu enklare att få dina webbplatser att fungera på alla enheter. Detta gratis jQuery-plugin tar en behållare med bilder och omorganiserar dem dynamiskt baserat på olika skärmstorlekar.

Sedan olika behållare hålla bilder på olika sätt, De kan ändra storlek på mycket konstiga sätt. Ibland har du bilder av människor och deras ansikten kan bli avskurna när de ändras på mobilen.

Responsify-plugin skapades för att lösa detta exakta problem. Det kan fungera automatiskt men den sanna magiken ligger i definiera ditt eget fokusområde på bilden.

Det använder en interna system med decimala beskrivningar för att hitta var fokusen på bilden ska vara. Till exempel kan du definiera positioner som data fokus-top som “block i” ett visst segment av bilden.

Dessa data måste godkännas i form av decimaler, till exempel en .5 decimal mål 50% av bilden (vänster / höger eller topp / botten). Det här är naturligtvis ganska förvirrande att göra själv. Men det finns en gratis Responsera app det låter dig beräkna positionerna dynamiskt i din webbläsare.

Ladda bara upp en bild, definiera fokusområdet och kopiera / klistra in bildkoden i din webbplats. Responsify-plugin kommer att ha all den information som behövs för att ändra storlek på bilden på mindre skärmar.

Du kan hitta en hel del live demo länkar i GitHub repo, inklusive kodsedlar för att kopiera / klistra in på din webbplats.

Denna plugin är inte den perfekta lösningen för varje projekt. Ibland gör du det vilja bilder att ändra storlek utan fasta fokusområden. Men om du använder murverk med jQuery det gör inte ont för att lägga till ResponsifyJS i din stack.

Om du vill veta mer kan du besöka plugin-hemsidan för en live-demo, en hämtningslänk och en fullständig installationsguide.