Responsive Images Made Easy med ResponsifyJS

Den moderne nettsiden skal være 100% lydhør, og nyere biblioteker gjør dette stadig mer mulig.

Med gratis plugins, som ResponsifyJS, er det enda enklere å få nettsteder som fungerer på alle enheter. Denne gratis jQuery-plugin tar en beholder med bilder og omorganiserer dem dynamisk basert på varierende skjermstørrelser.

Siden forskjellige beholdere holder bilder på en annen måte, kan de endre størrelsen på veldig underlige måter. Noen ganger har du bilder av mennesker, og ansiktene dine kan bli avskåret når de endres på mobilen.

Responsify-pluginet ble opprettet for å løse dette nøyaktige problemet. Det kan fungere automatisk, men den sanne magien ligger i å definere ditt eget fokusområde på bildet.

Den bruker et internt system med desimalbeskrivelser for å finne hvor fokuset på bildet skal være. For eksempel kan du definere posisjoner som data-focus-top som "blokkerer i" et bestemt segment av bildet.

Disse dataene må bestås i form av decimaler, for eksempel et .5 desimalt mål 50% av bildet (venstre / høyre eller topp / bunn). Dette er selvsagt ganske forvirrende å gjøre selv. Men det er en gratis Responsify-app som lar deg beregne posisjonene dynamisk i nettleseren din.

Bare last opp et bilde, definer fokusområdet, og kopier deretter / lim inn bildekoden til nettstedet ditt. Responsify-pluginet har alle dataene det trenger for å endre størrelsen på bildet på mindre skjermer.

Du kan finne ganske mange live demo lenker i GitHub repo, inkludert kodestykker for å kopiere / lime inn på nettstedet ditt.

Denne plugin er ikke den perfekte løsningen for hvert prosjekt. Noen ganger vil du få bilder til å endre størrelse uten faste fokusområder. Men hvis du bruker masonry grids med jQuery, gjør det ikke vondt for å legge ResponsifyJS til stabelen din.

Hvis du vil vite mer, kan du gå til plugin-startsiden for en live-demo, en nedlastingslink og en full oppsettguide.