Images réactives: astuces CSS qui font gagner du temps

Si vous êtes engagé dans le développement Web, il est fort probable que vous connaissiez deux monstres, dont nous parlerons dans l'article dont nous publions la traduction aujourd'hui. Nous parlons d'images et de délais. Parfois, pour une raison quelconque, les images ne veulent pas tenir à la place des mises en page qui leur sont conçues, et vous ne pouvez pas passer plusieurs heures à le comprendre.



L'auteur de ce document dit qu'il était souvent confronté à un problème similaire, et ces collisions lui ont appris quelque chose. Ici, il veut parler de cinq approches de gestion des tailles d'image qu'il aime le plus.

Approche n ° 1: image de fond

Vendredi. Cinq heures du soir. Vous devez de toute urgence terminer une certaine page. Tout est prêt, le seul problème, ce sont les photos qui ne correspondent en aucun cas là où elles devraient être. Si cela vous est arrivé, voici un outil magique qui vous aidera:

.myImg {  background-image: url("my-image.png");  background-size: cover; } 

Semble familier? Nous l'avons tous fait une fois. Cela vous a-t-il suggéré une fraude?

L'utilisation des propriétés d' background - background est très utile, ils font juste ce qu'on attend d'eux. Cependant, il convient de rappeler qu'ils ne doivent être utilisés que pour les images qui ne font pas partie du contenu principal de la page, pour les images qui remplacent le texte, et dans certains cas spéciaux .

Approche n ° 2: ajustement à l'objet

Et si je dis que la propriété d' object-fit objet s'applique aux éléments <img> ? Soit dit en passant, cela fonctionne également avec la vidéo.

 .myImg { object-fit: cover; width: 320px; height: 180px; } 

C’est tout. Notez que la propriété d' object-fit objet peut être définie pour contain .

Support Prise en charge des objets

Malheureusement, l' object-fit ne fonctionnera pas dans IE et dans les anciennes versions de Safari, cependant, dans de tels cas, il existe un polyfill .

Voici les informations d'assistance prises à partir d'ici .


Prise en charge des navigateurs de bureau adaptés aux objets

→ Voici un exemple d'utilisation de l'ajustement d'objet

Approche n ° 3: la façon dont Netflix utilise

Ce dont nous venons de parler peut sembler intéressant, mais dans les navigateurs obsolètes, sans polyfills, cela ne fonctionnera pas. Si vous avez besoin de quelque chose d'universel, peut-être que ce dont nous allons parler maintenant vous convient. Cette méthode, l'une de mes préférées, fonctionne partout.

Elle consiste dans le fait que l'image doit être placée dans l'élément parent, dont la propriété position est définie sur relative , et la propriété padding est définie en pourcentage. Par conséquent, l'image occupera toute la zone libre de l'élément parent. Cela ressemble à ceci:

 .wrapper { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; } 

Ici, vous pensez peut-être que c'est trop compliqué. Cependant, après avoir compris le sens de cette technique, vous vous rendez compte qu'elle est très simple et pratique. De plus, cette technique est largement utilisée , par exemple, dans Netflix.


Jetez un œil aux noms de classe

→ Voici un exemple de mise en œuvre de cette technique

Approche n ° 4: hauteur

Ici, pour contrôler la taille de l'image, utilisez la propriété height: auto et, en plus, la propriété max-width . Il est possible que vous connaissiez déjà cette technique:

 img { height: auto; width: 100%; /*  max-width,     */ max-width: 720px; } 

Cette approche est applicable dans la plupart des cas, lorsque votre mise en page n'est pas trop compliquée.

→ Voici un exemple

Approche n ° 5: gestion et performances de l'image

Par «performance», j'entends le temps de chargement des pages. Le chargement d'une grande image peut prendre beaucoup de temps, ce qui donne à l'utilisateur l'impression que vos pages sont lentes, surtout si ces pages sont consultées sur des appareils mobiles.

Savez-vous que dans les navigateurs modernes, vous pouvez changer la source de l'image en fonction de la largeur de la page? C'est pourquoi l'attribut srcset .

Des attributs similaires peuvent être utilisés dans la balise HTML 5 . , , <img> . , , <img> :

 <picture> <source media="(max-width: 799px)" srcset="elva-480w.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img align="center" src="elva-800w.jpg"> </picture> 

→ Voici un exemple

Résumé

Pour résumer:

• Si votre image ne fait pas partie du contenu de la page, utilisez background-image .
• Si le support IE ne vous intéresse pas, utilisez object-fit .
• La technologie de conteneur basée sur Netflix avec un padding personnalisé fonctionne partout.
• Dans la plupart des cas, pour résoudre le problème avec les images, il suffit d'utiliser la propriété height: auto en CSS;
• Si vous souhaitez réduire le temps de chargement des pages, utilisez l'attribut srcset pour télécharger des images plus petites sur les appareils mobiles.

Nous espérons que les approches de travail avec les images discutées ici vous seront utiles.