Techniques CSS permettant de gagner du temps pour créer des images réactives

En tant que développeur web, il y a une forte probabilité que vous ayez rencontré les deux ennemis de cet article: les images et les délais . Parfois, pour certaines raisons, vos images ne correspondent pas à la mise en page et vous ne voulez pas vous en occuper pendant des heures.

Cette situation m'est arrivée à plusieurs reprises et j'ai appris de mes erreurs. Fini les hacks de magie noire - voici mes cinq techniques préférées pour gérer le redimensionnement d'image.

la méthode "OMG I BESOIN DE CELA ASAP"

Il est 17h00 vendredi, vous devez terminer cette page, mais les images ne correspondent pas à la mise en page. Il est temps d'utiliser votre tour de magie!

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

Sonne familier? Nous l'avons tous fait une fois, n'est-ce pas vous tromper?

L'utilisation des backgroundpropriétés est très utile, elles fonctionnent simplement. Cependant, rappelez-vous que vous ne devez les utiliser que pour des images sans contenu ou en remplacement de texte et dans certains cas particuliers.

Le chemin du futur

Et si je vous disais que ce genre de magie existe aussi pour les éléments? Dites «bonjour» à la propriété object-fit - qui fonctionne également pour les vidéos, d'ailleurs!

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

C'est tout les gens! Voyez comment lorsque nous récupérons la valeur conviviale cover, nous pouvons également utiliser contain.

Ok, quel est le piège?

Malheureusement object-fit, ne fonctionnera pas sur IE et les anciennes versions de Safari, mais il existe un polyfill.

La manière «Netflix»

Vous pensez peut-être «gentil truc, une autre façon qui ne fonctionne pas dans les anciens navigateurs comme IE? Ne vous inquiétez pas, celui-ci fonctionne partout et c'est mon préféré! Vous devrez envelopper votre image avec un parent rembourré relatif.

Nous conserverons le ratio d'image avec un pourcentage sur la paddingpropriété. Votre image sera un enfant absolu en taille réelle.

Le code ressemble à ceci:

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

"Hé mec, ça a l'air compliqué."

Une fois que vous avez compris le concept, la technique est simple et largement utilisée. Netflix l'utilise!

Une petite démo:

La manière simple

Vous connaissez peut-être déjà celui-ci:

img { height: auto; width: 100%; /* even more control with max-width */ max-width: 720px; }

Si votre mise en page n'est pas trop compliquée, cela fonctionne dans la plupart des cas.

La voie de la performance (avancé)

Par performances, j'entends les temps de chargement. Une grande image de héros peut la ruiner et rendre votre page lente, en particulier sur mobile.

Saviez-vous que dans les navigateurs modernes, vous pouvez modifier une source d'image en fonction de la largeur de votre page? C'est pour ça qu'il srcsetest fait!

Vous pouvez les combiner avec la balise HTML 5 , qui se dégrade gracieusement avec un fichier .

Récapituler

  1. À utiliser background-image si votre image ne fait pas partie du contenu de la page.
  2. À utiliser object-fitsi vous ne vous souciez pas d'IE.
  3. La technique du conteneur rembourré, utilisée par Netflix, fonctionne partout.
  4. Dans la plupart des cas, ajoutez simplement height: auto;votre CSS.
  5. Si vous avez besoin de temps de chargement rapides, utilisez srcsetpour charger des images plus petites sur mobile.