Des images réactives faciles avec ResponsifyJS

Le Web moderne doit être 100% réactif et les nouvelles bibliothèques rendent cela de plus en plus possible..

Avec des plugins gratuits, tels que ResponsifyJS, Il est encore plus facile de faire fonctionner vos sites Web sur tous les appareils. Ce plugin jQuery gratuit prend un conteneur d'images et les réarrange dynamiquement basé sur différentes tailles d'écran.

Depuis différents conteneurs tenir les images différemment, ils peuvent redimensionner de manière très étrange. Parfois, vous avez des photos de personnes et leur visage peut être coupé lorsque redimensionné sur un mobile.

Le plugin Responsify a été créé pour résoudre ce problème précis. Cela peut fonctionner automatiquement mais la vraie magie réside dans définir votre propre domaine d'intervention sur l'image.

Il utilise un système interne de descriptions décimales pour trouver où le focus de l'image devrait être. Par exemple, vous pouvez définir les positions tel que data-focus-top lequel “bloque” un certain segment de l'image.

Ces données doivent être transmises sous forme de nombres décimaux, par exemple, une décimale 0,5 cible 50% de l'image (gauche / droite ou haut / bas). Naturellement, c'est assez déroutant à faire par vous-même. Mais, il y a un application Responsify gratuite cela vous permet calculer les positions dynamiquement dans votre navigateur.

Il suffit de télécharger une image, de définir la zone de mise au point, puis de copier / coller le code de l’image sur votre site Web. Le plugin Responsify aura toutes les données nécessaires pour redimensionner correctement l'image sur des écrans plus petits.

Vous pouvez en trouver plusieurs liens de démonstration en direct dans le dépôt GitHub, y compris des extraits de code à copier / coller dans votre site.

Ce plugin n'est pas la solution parfaite pour chaque projet. Parfois, tu vas vouloir images à redimensionner sans zones de focus fixes. Mais si vous utilisez grilles de maçonnerie avec jQuery ajouter ResponsifyJS à votre pile ne fait pas de mal.

Pour en savoir plus, visitez la page d'accueil du plugin pour une démonstration en direct, un lien de téléchargement et un guide de configuration complet..