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, for eksempel ResponsifyJS, Det er enda enklere å få nettsteder som fungerer på alle enheter. Dette gratis jQuery-plugin tar en beholder med bilder og omorganiserer dem dynamisk basert på varierende skjermstørrelser.

Siden forskjellige beholdere hold bilder på en annen måte, de kan endre størrelsen på veldig underlige måter. Noen ganger har du bilder av mennesker, og ansiktene dine kan bli kuttet av 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 definerer ditt eget fokusområde på bildet.

Den bruker en internt system med desimaltegn å finne hvor fokuset på bildet skal være. For eksempel kan du definere posisjoner som for eksempel data-fokus-topp hvilken “blokkerer inn” et bestemt segment av bildet.

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

Bare last opp et bilde, definer fokusområdet, og kopier / 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 linker 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 vil bilder for å endre størrelse uten faste fokusområder. Men hvis du bruker murverk med jQuery det gjør 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 fullstendig oppsettsguide.