Responsive Images Made Easy med ResponsifyJS

Den moderne web skal være 100% lydhør og nyere biblioteker gør dette mere og mere muligt.

Med gratis plugins, som f.eks ResponsifyJS, Det er endnu nemmere at få dine hjemmesider til at fungere på alle enheder. Dette gratis jQuery-plugin tager en beholder af billeder og Omdanner dem dynamisk baseret på forskellige skærmstørrelser.

Siden forskellige beholdere Hold billeder forskelligt, de kan ændre størrelsen på meget underlige måder. Nogle gange har du billeder af mennesker, og deres ansigter kan blive afskåret, når de ændres på mobilen.

Responsify-plugin'et blev oprettet for at løse dette nøjagtige problem. Det kan fungere automatisk, men den sande magi ligger i definerer dit eget fokusområde på billedet.

Det bruger en indre system med decimaltegnelser for at finde, hvor billedets fokus skal være. For eksempel kan du definere positioner såsom data-fokus-top hvilken “blokerer i” et bestemt segment af billedet.

Disse data skal bestås i form af decimaler, for eksempel en .5 decimal mål 50% af billedet (venstre / højre eller øverste / nederste). Det er naturligvis ret forvirrende at gøre selv. Men der er en gratis Responsify app det lader dig beregne positionerne dynamisk i din browser.

Du skal bare uploade et billede, definere fokusområdet og derefter kopiere / indsætte billedkoden til dit websted. Responsify-plugin'et har alle de data, der er nødvendige for at ændre størrelsen på billedet på mindre skærme korrekt.

Du kan finde et par stykker live demo links i GitHub repo, herunder kodestykker til at kopiere / indsætte i dit websted.

Dette plugin er ikke den perfekte løsning til ethvert projekt. Nogle gange vil du vil have billeder, der skal ændres uden faste fokusområder. Men hvis du bruger murværk med jQuery det gør ikke ondt for at tilføje ResponsifyJS til din stack.

Hvis du vil vide mere, skal du besøge plugin-startsiden for en live demo, et downloadlink og en komplet installationsvejledning.