Nous savons que les images jouent un rôle crucial sur une page web. Elles permettent de présenter le contenu de manière efficace et claire. Parfois, l’image du contenu peut avoir une taille supérieure ou inférieure à celle du conteneur dans lequel elle doit s’afficher, ou bien son rapport d’aspect peut différer de celui du conteneur. Nous allons examiner comment afficher une image de la meilleure façon possible.

object-fit

object-fit définit la manière dont une image doit être redimensionnée pour s’adapter à son conteneur.

object-fit: fill | contain | cover | none | scale-down;

• fill étire l’image pour remplir le conteneur, sans tenir compte de son rapport d’aspect. Cela peut entraîner un recadrage ou une déformation de l’image ;
• contain adapte l’image à la taille du conteneur tout en préservant son rapport d’aspect. Cela peut générer des espaces vides autour de l’image si le rapport d’aspect de l’image et du conteneur diffèrent ;
• cover adapte l’image pour recouvrir entièrement le conteneur tout en préservant son rapport d’aspect ;
• none affiche l’image à sa taille d’origine, sans tenir compte de la taille du conteneur. Cela peut provoquer un débordement de l’image hors du conteneur ;
• scale-down réduit l’image pour l’adapter au conteneur si elle est plus grande que sa taille naturelle, ou affiche l’image à sa taille naturelle si elle tient dans le conteneur.

object-position

object-position spécifie la position de l'image à l'intérieur de son conteneur. Elle accepte deux valeurs : une valeur horizontale et une valeur verticale, ou bien des mots réservés.

object-position: x y;