Jérémy Le Piolet - Blog

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

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é.
Cycle de vie d'une Activity Android, avec les différents états onPause/onResume/onStart/OnStop/onCreate/OnDestroy et les échanges entre eux.
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).