Responsieve beelden gemakkelijk gemaakt met ResponsifyJS

Het moderne web zou 100% responsief moeten zijn en nieuwere bibliotheken maken dit steeds beter mogelijk.

Met gratis plug-ins, zoals ResponsifyJS, het is nog eenvoudiger om uw websites op alle apparaten te laten werken. Deze gratis jQuery-plug-in neemt een container met afbeeldingen en dynamisch herschikken op basis van verschillende schermformaten.

Sinds verschillende containers houd afbeeldingen anders vast, ze kunnen op hele vreemde manieren verkleinen. Soms heb je foto's van mensen en kunnen hun gezichten afgesneden worden wanneer ze worden aangepast op mobiel.

De Responsify-plug-in is gemaakt om dit exacte probleem op te lossen. Het kan automatisch werken, maar de ware magie ligt erin je eigen focusgebied definiëren op de foto.

Het gebruikt een intern systeem van decimale beschrijvingen om te vinden waar de focus van de afbeelding zou moeten liggen. U kunt bijvoorbeeld posities definiëren zoals data-focus-top welke “blokken in” een bepaald segment van de afbeelding.

Deze gegevens moeten worden doorgegeven in de vorm van decimalen, bijvoorbeeld een .5 decimaal richt 50% van de afbeelding (links / rechts of boven / onder). Natuurlijk is dit behoorlijk verwarrend om zelf te doen. Maar er is een gratis Responsify-app dat laat je bereken de posities dynamisch in je browser.

Upload een foto, definieer het focusgebied en kopieer en plak de afbeeldingscode in uw website. De Responsify-plug-in zal alle gegevens bevatten die nodig zijn om de afbeelding op kleinere schermen te verkleinen.

Je kunt er heel wat vinden live demo-links in de GitHub-repo, inclusief codefragmenten om naar uw site te kopiëren en te plakken.

Deze plug-in is niet de perfecte oplossing voor elk project. Soms wel willen afbeeldingen waarvan de grootte gewijzigd moet worden zonder vaste focusgebieden. Maar, als je gebruikt metselwerkroosters met jQuery het doet geen pijn om ResponsifyJS aan je stapel toe te voegen.

Ga voor meer informatie naar de startpagina van de plug-in voor een live demo, een downloadlink en een uitgebreide installatiehandleiding.