Éviter la déformation d'une image en CSS

Cet article a été écrit il y a plus d'un an : son contenu peut être dépassé.

Le cas de figure est très simple : une image affichée avec une balise <img> qui n’est pas aux bonnes dimensions de son contenant. Résultat : l’image est étirée sur la dimension qui la plus petite, le rendu est déformé : ça ne va pas.

L’une des solutions les plus courante pour ce genre de problème était de transformer l’image en image de fond via balise CSS : on remplaçait la balise <img> par une <div> avec une propriété background avec l’url de l’image. Cela fonctionne, mais ça pose des soucis d’accessibilité selon les cas.

Il existe fort heureusement une solution plus morderne : la propriété CSS object-fit. Cette propriété permet d’indiquer comment un contenu doit s’adapter à son parent en fonction de sa largeur et de sa hauteur. Autrement dit, cette propriété permet d’indiquer, lorsqu’il y a des soucis de taille, si l’objet doit être rogné, étiré ou mis à l’échelle.

Dans le cas d’une image, cela nous permet de conserver notre balise HTML <img> tout en s’adaptant à notre design.

Il existe plusieurs valeurs :

contain : l’image est redimensionnée pour être affichée entièrement dans le parent. Elle n’est pas déformée mais ne prend pas toute la place
cover : l’image est dimensionnée de façon à remplir toute la zone d’affichage sans toucher au ratio de l’image. Et au moins une des dimensions (largeur ou hauteur) est conforme à la dimension du parent. Tout ce qui dépasse n’est pas affiché.
fill : l’image est étirée pour rentrer dans les dimensions du parent.
none : l’image n’est pas redimensionnée, aucune dimension n’est adaptée. Ce qui dépasse n’est pas affiché.

Résultat du rendu des iamges avce object-fit. Sans la propriété, avec cover, avec contain, avec fill et avec none — Rendu d'une balise img avec la propriété object-fit. Les différents rendus sont illustrés par une image avec des personnages légos.

Niveau compatibilité, IE ne supporte pas la propriété, Edge ne la supporte que pour les images (ce qui est notre cas, ça tombe bien). Tous les autres supportent la propriété sans restriction (car oui, elle peut s’appliquer à d’autres éléments que les images).