La propriété CSS object-fit permet aux développeurs web de contrôler la façon dont une image ou une vidéo est redimensionnée pour s’adapter à son conteneur.
Elle est particulièrement utile dans des situations où les dimensions de l’image ou de la vidéo diffèrent de celles du conteneur, ce qui pourrait autrement entraîner une distorsion ou un recadrage non souhaité.
La propriété object-fit
- object-fit: fill;
- object-fit: contain;
- object-fit: cover;
- object-fit: none;
La propriété object-fit fonctionne sur les éléments de type remplaçable tels que les <img>, <video>, ou tout autre élément dont le contenu est défini par une URL (comme les arrière-plans d’éléments <object>).
Syntaxe et valeurs de la propriété CSS object-fit
La syntaxe de base est la suivante :
element {
object-fit: valeur;
}Par défaut, la propriété object-fit utilise la valeur fill. Cela signifie que l’image ou la vidéo sera étirée pour remplir entièrement son conteneur, en ignorant son ratio d’aspect.
Conséquence : des images déformées si la largeur et la hauteur du conteneur ne correspondent pas à celles du média.
Exemple d’utilisation
<div class="container">
<img src="chemin/vers/image.jpg" alt="Description de l'image">
</div>.container {
width: 300px;
height: 200px;
border: 1px solid #000;
}
.container img {
width: 100%;
height: 100%;
object-fit: fill;
}Résultat : L’image est étirée pour remplir complètement le conteneur de 300×200 pixels, mais elle sera distordue car ses proportions sont modifiées.
Le valeurs de la propriété CSS object-fit
fill: Valeur par défaut. L’image est redimensionnée pour remplir le conteneur. Cela peut entraîner une distorsion si les proportions de l’image diffèrent de celles du conteneur.contain: L’image est redimensionnée pour être entièrement visible dans le conteneur tout en conservant ses proportions d’origine. Il peut y avoir des espaces vides si les proportions ne correspondent pas.cover: L’image est redimensionnée pour couvrir complètement le conteneur tout en conservant ses proportions d’origine. Une partie de l’image peut être coupée si les proportions diffèrent.none: L’image n’est pas redimensionnée. Elle garde ses dimensions d’origine, ce qui peut entraîner un débordement du conteneur.scale-down: L’image est redimensionnée en utilisant soit none soit contain, selon lequel donnera l’image la plus petite.
Quand utiliser object-fit ?
- Affichage d’un logo dans un header :
object-fit: containpermettra de conserver les proportions du logo, même si le header a une taille différente. - Galerie d’images avec des tailles variées :
object-fit: covergarantira que toutes les images remplissent leur conteneur, créant une grille visuelle uniforme. - Une image en fond de page pleine largeur :
object-fit: coveraffichera l’image en entier sur tous les écrans, sans déformation. - Une vidéo dans un lecteur intégré :
object-fit: containpréservera le ratio d’aspect de la vidéo, évitant les bandes noires sur les côtés.
Compatibilité des navigateurs
La propriété object-fit est largement prise en charge par les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge. Internet Explorer 11 ne la supporte pas nativement, mais des polyfills JavaScript peuvent être utilisés pour la simuler.
La propriété CSS object-fit est un outil précieux pour optimiser l’affichage de vos images et vidéos sur le web. En comprenant son fonctionnement et en choisissant la valeur appropriée pour chaque cas d’utilisation, vous garantissez une expérience visuelle cohérente pour vos utilisateurs, quel que soit leur appareil.
