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 être affichée, ou son ratio 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 respecter le ratio d’aspect (peut déformer l’image).
• contain : adapte l’image à l’intérieur du conteneur tout en conservant le ratio d’aspect (peut laisser des espaces vides).
• cover : remplit complètement le conteneur tout en conservant le ratio d’aspect (peut rogner l’image).
• none : utilise la taille d’origine de l’image ; elle peut dépasser du conteneur.
• scale-down : utilise la plus petite taille entre none ou contain (soit la taille d’origine, soit réduite pour s’adapter).

object-position

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

object-position: x y;