La mise en œuvre d'images réactives en est encore à ses balbutiements. Nous avons vu beaucoup d’idées et de suggestions sur la façon de procéder et nous en verrons beaucoup plus.
Aujourd'hui, nous allons examiner un petit cadre fascinant qui vous permet non seulement de redimensionner automatiquement vos images lorsque la fenêtre d'affichage change, mais également de les rogner en gardant à l'esprit un élément central important. Étonnamment, il fait tout cela avec du CSS pur. Lisez la suite pour voir comment cela fonctionne.
Rencontrer le point focal
Focal Point est un projet GitHub et un framework CSS créés par Adam Bradley. Comme vous le savez, le concept d'images réactives nécessite que toutes les images de votre page soient redimensionnées et redistribuées afin d'obtenir une mise en page optimale pour la taille de la fenêtre d'affichage actuelle. Focal Point va encore plus loin dans cette idée: non seulement il redimensionne vos images, mais il les recadre également.
Le problème avec cette idée est bien sûr que si vous rognez une image de façon arbitraire, vous pourriez couper la partie la plus importante de l'image! Par exemple, dans l'image ci-dessus, le sujet se trouve du côté droit de l'image. Comment pouvons-nous l'empêcher d'être recadrée?
Heureusement, le point focal vous permet de spécifier une zone cible de l'image à conserver (le point focal). Ainsi, lorsque le cadre recadrera votre image, il le fera de manière à ce que celle-ci soit toujours aussi belle.
Comment ça marche?
La mise en œuvre du point focal est un processus assez unique, mais assez facile. Dans un premier temps, nous parlerons du processus général utilisé pour choisir un point focal, puis nous plongerons dans le code.
Lorsque vous insérez une image dans votre page Web à l'aide de Focal Point, cette image est automatiquement divisée en une grille invisible 12? 12. Peu importe les dimensions des images, la grille s’adapte à tous vos besoins.
Maintenant que nous savons comment l’image est divisée, nous devons choisir un emplacement spécifique dans cette grille qui servira de point focal. Cela signifie que, lorsque l'image est recadrée, le point que nous choisissons servira de zone centrale autour de laquelle le recadrage aura lieu. Donc, si nous choisissons le visage de l'homme, nous pouvons nous assurer que les aspects importants de cette photo sont conservés.
Le processus consiste ici à trouver le visage, puis à compter les unités de la grille à partir du centre. Dans ce cas, son visage est à trois unités à droite et à trois unités du centre de la grille.
Le code
Maintenant que nous avons notre point central à l’esprit, il est temps de planifier notre code. Pour commencer, assurez-vous de télécharger le projet depuis GitHub et de lier le fichier CSS inclus à votre document HTML.
Une fois que vous êtes tous configurés, il est temps de configurer deux div et une balise d’image. Oui, je sais, c'est beaucoup de balisage pour une seule image et un inconvénient majeur pour l'utilisation de ce cadre. Voici le balisage de base:
Assez simple non? Ajoutons maintenant un en-tête et un paragraphe pour un contenu de page générique.
Ensuite, ajoutez l’image juste comme nous l’avons fait ci-dessus en utilisant le? Right-3? et? up-3? classes et deux divs.
Voyez-le en action
Maintenant que notre démo est construite, jetons un coup d'oeil. Si nous examinons la page sur un ordinateur de bureau ou un ordinateur portable, nous voyons que les images se sont automatiquement conformées à la taille de notre colonne et affichent la totalité de la zone d'image.
Démo: Cliquez ici pour lancer.
Maintenant, si nous réduisons la taille de notre fenêtre ou si nous passons à un appareil mobile, nous pouvons voir les images s’adapter parfaitement. Au fur et à mesure que nous réduisons, une requête médiatique intervient et les images ne sont plus seulement plus petites, mais rognées.
Du point de vue du design, c'est cool ça!? Plus une image devient petite, plus il est facile pour ce qui était autrefois un grand point focal important de devenir un point minuscule. Avec ce cadre, vous pouvez vous assurer que les utilisateurs de petits appareils reçoivent toujours des images à fort impact.
Compatibilité du navigateur
Cela devrait fonctionner correctement dans tous les principaux navigateurs modernes. Pour IE8, les images seront redimensionnées correctement, elles ne seront tout simplement pas recadrées. Ce n'est vraiment pas la fin du monde, car 99,99% des sites Web n'ont pas cette fonctionnalité de recadrage automatique!
Cool, mais comment ça marche?
Maintenant, nous savons que Focal Point fonctionne, mais il est important de savoir Comment Ça marche.De cette façon, si vous voulez modifier ce qui se passe ou faire quelque chose de similaire sans le framework, vous pourrez le faire sans problème.
La première partie du code est une solution d’image sensible réactive basée sur CSS. Il serait bon de sauvegarder cela avec du JavaScript, mais c'est un bon début. Comme vous pouvez le constater, il tire parti de la largeur 100%, de la largeur maximale 100% et de la hauteur automatique pour travailler sa magie.
Ce qui se passe ensuite est un peu plus compliqué. Tout d'abord, une requête multimédia de base est implémentée à 767px. Ensuite, pour que la culture se produise, des marges négatives sont utilisées pour chacune des classes possibles. J'ai nettoyé ce code pour n'inclure que le? Up-3? et? right-3? les classes que nous avons utilisées ci-dessus.
Comme vous pouvez le constater, il n’ya vraiment pas beaucoup de code au travail ici, mais c’est un morceau de CSS assez délicat. Les marges négatives sont utilisées avec les unités em pour rogner l'image par rapport à un point spécifique. Un grand bravo à Adam Bradley pour avoir imaginé cette technique intelligente!
Qu'est-ce que tu penses?
Maintenant que vous avez vu ce que fait le point focal et comment il fonctionne, il est temps que vous lui indiquiez ce que vous pensiez. Utiliseriez-vous cela dans un projet? Pourquoi ou pourquoi pas? Comment pourriez-vous l'améliorer encore?
De plus, si vous avez déjà vu d’autres outils, techniques ou cadres d’image très réactifs, laissez un lien et je les vérifierai.