object-fit en CSS : cadrer une image dans un conteneur sans la déformer

Une grille de vignettes de produits, toutes de taille identique, alors que les photos fournies par chaque vendeur ont des proportions différentes : sans intervention, ces images s'étirent ou se compressent pour remplir leur cadre, produisant des visages déformés et des objets écrasés. object-fit résout ce problème d'un mot.

Elle contrôle comment le contenu réel d'une image ou d'une vidéo, une balise img ou video, se positionne à l'intérieur de la boîte que lui impose son conteneur, sans jamais déformer les proportions d'origine du média.

Définition

object-fit indique comment le contenu d'un élément remplaçable, principalement img et video, doit se redimensionner pour tenir dans la boîte définie par width et height, en Dimensionnement CSS. Elle joue pour un média le rôle que background-size joue pour une image de fond posée avec background-image.

.vignette-produit {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

Les valeurs principales : cover, contain et fill

cover : le remplaçant du recadrage côté serveur

cover est de loin la valeur la plus utilisée sur les grilles de photos, les avatars ou les vignettes de produits. Elle agrandit l'image jusqu'à ce qu'elle remplisse entièrement la boîte du conteneur, quitte à recadrer les bords qui dépassent, sans jamais déformer les proportions. C'est devenu le remplaçant moderne d'un recadrage effectué autrefois côté serveur, image par image, avant même l'envoi au navigateur.

object-fit fonctionne aussi bien sur une vidéo que sur une image, ce qui la rend précieuse pour des vignettes de prévisualisation vidéo dans une grille, où chaque extrait doit occuper exactement le même espace malgré des formats d'image d'origine parfois très différents d'un fichier à l'autre.

object-position pour ajuster le cadrage

Quand cover recadre un peu trop généreusement, coupant par exemple le haut d'un visage sur une photo de profil, object-position permet de choisir quelle partie de l'image rester visible, avec les mêmes valeurs que celles utilisées pour positionner un arrière-plan, comme center top ou 50% 20%.

.avatar-equipe {
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: center top;
}

object-fit et overflow : deux comportements liés

object-fit régit uniquement le contenu interne d'un média, tandis que overflow régit ce qui déborde d'un conteneur classique fait de texte ou d'autres éléments. Les deux propriétés se croisent souvent sur une même interface, une vignette de produit combinant par exemple object-fit sur son image et overflow: hidden sur la carte qui l'entoure.

Questions fréquentes

Non, sans dimensions explicites en largeur et en hauteur, l'image ou la vidéo garde simplement sa taille naturelle et object-fit n'a rien à recadrer : la propriété ne prend tout son sens que lorsque le conteneur impose une boîte de taille fixe, différente des proportions réelles du média.

aspect-ratio impose un ratio à la boîte du conteneur lui-même, alors qu'object-fit décide comment le contenu se cadre à l'intérieur d'une boîte déjà définie : les deux se combinent très bien, aspect-ratio pour la forme du cadre, object-fit pour le comportement de l'image à l'intérieur.

Non, object-fit ne concerne que les éléments remplaçables comme img ou video directement présents dans le HTML : pour une image posée en arrière-plan avec background-image, c'est la propriété background-size, avec les mêmes valeurs cover et contain, qui joue exactement le même rôle.