🖼️ Démonstration : object-fit en CSS
📚 Qu'est-ce que object-fit ?
La propriété CSS object-fit spécifie comment le contenu d'un élément remplacé (comme une image ou une vidéo) doit s'adapter à son conteneur en termes de taille.
Elle est particulièrement utile pour contrôler le comportement des images qui ont des dimensions différentes de leur conteneur, évitant ainsi les déformations ou les débordements.
fill (défaut)
L'image remplit tout le conteneur. Elle sera étirée ou compressée pour occuper 100% de l'espace.
object-fit: fill;
}
⚠️ Attention : Peut déformer l'image (aspect ratio non respecté).
contain
L'image est redimensionnée pour tenir entièrement dans le conteneur tout en conservant ses proportions.
object-fit: contain;
}
✅ Idéal pour : Afficher l'image complète sans déformation.
cover
L'image couvre tout le conteneur en conservant ses proportions. Elle peut être rognée.
object-fit: cover;
}
✅ Idéal pour : Créer des backgrounds ou vignettes sans espaces vides.
none
L'image garde sa taille d'origine. Elle peut déborder ou laisser des espaces vides.
object-fit: none;
}
📝 Note : L'image n'est pas redimensionnée du tout.
scale-down
Choisit entre 'none' et 'contain' selon ce qui produit la plus petite taille finale.
object-fit: scale-down;
}
✅ Idéal pour : Éviter l'agrandissement d'images petites.
🎯 Bonus : Combiner avec object-position
La propriété object-position permet de contrôler la position de l'image dans son conteneur (fonctionne bien avec 'cover' et 'none').
object-position: top;
object-position: center;
object-position: bottom right;
