Aujourd’hui nous allons parler de ImageFill, un plugin jquery qui permet de forcer une image dans un cadre, sans la déformer. On parle de plus en plus de responsive design, et il est vrai que la gestion des images y prends une place toute particulière. C’est donc une place toute aussi particulière que prend ce plugin qui facilite la vie.
Pour commencer, ImageFill a une petite dépendance : ImagesLoaded, que vous pouvez récupérer ici : https://github.com/desandro/imagesloaded. Il vous suffit pour pouvoir utiliser ImageFill d’importer ImagesLoaded juste avant (la version minified suffit).
Une fois que c’est fait, il va falloir suivre attentivement la suite. D’abord, vous insérez votre image dans un conteneur, un div par exemple :
<div class="mycontainer"><img src="myawesomeimage" /></div>
Ensuite, vous appliquez ImageFill sur le container :
$('.mycontainer').imageFill();
Et c’est tout : l’image rentre dans sa boite, et elle est rognée si les proportions ne sont pas les bonnes. Du coup, pas de déformation, il ne vous reste plus qu’à :
- gérer la source de l’image en fonction de la taille de l’écran
- rendre les conteneurs flottants avec une taille adaptable
ImageFill va continuellement vérifier la taille du div dans lequel est placée l’image, de fait si on souhaite alléger la page en diminuant la fréquence de check.
Tout est expliqué dans le site officiel : http://johnpolacek.github.io/imagefill.js/