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 quescale-down
ne peut que réduire l'image ou la vidéo alors quecontain
peut aussi l'agrandir si c'est nécessaire. - object-fit:
initial
;La valeur initiale est
fill
. -
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).
object-fit
:
