CSS - Propriété object-fit

Description de la propriété object-fit.

object-fit définit comment doit être coupé ou redimensionné un élément par rapport aux dimensions qui lui sont imposées. Cette propriété s'applique aux images ou aux vidéos. Elle permet d'éviter les déformations qui se produisent lorsque le ratio entre la largeur et la hauteur imposées est différent du ration de l'image ou de la vidéo originale.

Valeurs pour object-fit.

• object-fit: fill;

  Valeur par défaut. L'image ou la vidéo est dimensionnée en fonction de la largeur et de la hauteur définie, même si cela provoque une distorsion (ratio largeur/hauteur différent de celui de l'image originale).

• object-fit: contain;

  L'image ou la vidéo est rétrécie ou agrandie pour qu'elle soit entièrement visible tout en conservant son ratio, donc sans provoquer de distorsion. Si le ratio largeur/hauteur est différent de celui de l'image originale, des marges seront visibles.

• object-fit: cover;

  L'image ou la vidéo est dimensionnée pour emplir la place imposée, sans changement de ses proportions. Si le ratio largeur/hauteur est différent de celui de l'image originale, des parties seront coupées.

• object-fit: none;

  L'image ou la vidéo est affichée dans ses dimensions originales, sans distorsion. L'image ou la vidéo peut être coupée ou ne pas emplir entièrement l'espace disponible.

• object-fit: scale-down;

  L'image ou la vidéo est rétrécie (si nécessaire) pour la faire tenir en entier dans l'espace disponible, sans la déformer. Si le ratio largeur/hauteur et différent de celui de l'image originale, des marges seront visibles.

  La différence avec contain est que scale-down ne peut que réduire l'image ou la vidéo alors que contain peut aussi l'agrandir si c'est nécessaire.

• object-fit: initial;

  La valeur initiale est fill.

• object-fit: unset; object-fit: inherit;

  Reportez-vous à la description générale de ces valeurs.

Simulateur.

Ce simulateur vous permet de visualiser l'effet de la propriété object-fit. Choisissez une valeur pour la propriété et redimensionnez le cadre de l'image avec la souris (coin en bas à droite). Observez comment se comporte l'image.

L'image originale à un ratio de 2 (largeur=300 pixels / hauteur=150 pixels).