La propriété object-fit expliquée simplement
La propriété CSS object-fit contrôle comment le contenu d'un élément remplacé (image, vidéo, iframe) s'adapte à son conteneur. C'est l'équivalent de background-size mais pour les éléments .
Sans object-fit, les images sont soit déformées, soit débordent de leur conteneur. Cette propriété résout élégamment ces problèmes courants du développement web.
Les 5 valeurs de object-fit
object-fit: fill (valeur par défaut)
/* L'image est étirée pour remplir exactement le conteneur */
/* ATTENTION : déforme l'image si les proportions diffèrent */
img {
width: 300px;
height: 200px;
object-fit: fill;
}L'image est étirée ou compressée pour correspondre exactement aux dimensions du conteneur, sans respecter les proportions originales. C'est rarement le résultat souhaité.
object-fit: contain
/* L'image entière est visible, avec des bandes si nécessaire */
img {
width: 300px;
height: 200px;
object-fit: contain;
background: #f0f0f0; /* Couleur des bandes */
}L'image est redimensionnée pour être entièrement visible dans le conteneur tout en conservant ses proportions. Des bandes (letterbox) peuvent apparaître si les proportions diffèrent.
object-fit: cover (le plus utilisé)
/* L'image couvre tout le conteneur, recadrée si nécessaire */
img {
width: 300px;
height: 200px;
object-fit: cover;
}L'image est redimensionnée pour couvrir entièrement le conteneur tout en conservant ses proportions. Les parties qui dépassent sont recadrées. C'est la valeur la plus utilisée en pratique.
object-fit: none
/* L'image garde sa taille originale, centrée et recadrée */
img {
width: 300px;
height: 200px;
object-fit: none;
}L'image n'est pas redimensionnée du tout. Elle est affichée à sa taille originale et recadrée par le conteneur.
object-fit: scale-down
/* Comme contain, mais ne grandit jamais au-delà de la taille originale */
img {
width: 300px;
height: 200px;
object-fit: scale-down;
}L'image est affichée comme none ou contain, selon laquelle donne la plus petite taille. L'image ne sera jamais agrandie au-delà de sa résolution native.
Comparatif visuel des valeurs
| Valeur | Proportions | Couvre tout | Image entière visible | Cas d'usage |
|---|---|---|---|---|
fill | Non respectées | Oui | Oui (déformée) | Rarement utile |
contain | Respectées | Non | Oui | Logos, illustrations |
cover | Respectées | Oui | Non (recadrée) | Photos, bannières, avatars |
none | Originales | Dépend | Non si grande | Cas spécifiques |
scale-down | Respectées | Non | Oui | Empêcher l'agrandissement |
object-position : contrôler le point focal
Quand object-fit: cover recadre une image, object-position permet de choisir quelle partie reste visible :
/* Par défaut : centré */
img { object-position: center center; } /* ou 50% 50% */
/* Recadrage depuis le haut (portraits) */
img.portrait {
object-fit: cover;
object-position: center top;
}
/* Recadrage depuis la droite */
img.right-focus {
object-fit: cover;
object-position: right center;
}
/* Position précise en pourcentage */
img.custom {
object-fit: cover;
object-position: 30% 20%;
}
/* Position en pixels */
img.offset {
object-fit: none;
object-position: -50px -20px;
}Cas d'usage pratiques
Grille de cartes avec images uniformes
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
border-radius: 8px 8px 0 0;
}Avatar circulaire
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
object-position: center top; /* Centré sur le visage */
border: 3px solid #3498db;
}
.avatar-sm { width: 40px; height: 40px; }
.avatar-lg { width: 120px; height: 120px; }Image de fond hero responsive
.hero {
position: relative;
height: 60vh;
overflow: hidden;
}
.hero img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%; /* Point focal ajusté */
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));
}Galerie d'images uniformes
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.5rem;
}
.gallery img {
width: 100%;
aspect-ratio: 1 / 1; /* Carré parfait */
object-fit: cover;
border-radius: 4px;
transition: transform 0.3s ease;
cursor: pointer;
}
.gallery img:hover {
transform: scale(1.05);
}Vidéo en arrière-plan
.video-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
opacity: 0.3;
}Logos de partenaires (tailles variées)
.partner-logos {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.partner-logo {
width: 120px;
height: 60px;
object-fit: contain; /* Pas de recadrage, logo entier visible */
filter: grayscale(100%);
opacity: 0.6;
transition: all 0.3s ease;
}
.partner-logo:hover {
filter: grayscale(0%);
opacity: 1;
}Combinaison avec aspect-ratio
La propriété aspect-ratio combinée avec object-fit permet de créer des conteneurs d'images parfaitement proportionnés :
/* Image 16:9 avec cover */
.thumbnail-16-9 {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* Image carrée */
.thumbnail-square {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
/* Image portrait 3:4 */
.thumbnail-portrait {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: center top;
}Différence entre object-fit et background-size
| Critère | object-fit | background-size |
|---|---|---|
| S'applique à | background-image | |
| SEO | Image indexée (alt text) | Non indexée |
| Accessibilité | Supporté (alt, figcaption) | Invisible pour les lecteurs d'écran |
| Lazy loading | Natif avec loading="lazy" | Nécessite JS |
| Formats modernes | Plus complexe |
Bonnes pratiques
- Préférez object-fit: cover pour les photos dans les grilles et les cartes.
- Utilisez object-fit: contain pour les logos et les illustrations techniques.
- Combinez avec aspect-ratio pour des mises en page parfaitement proportionnées sans JavaScript.
- Ajustez object-position pour les portraits (center top) et les paysages (center center).
- Préférez
à background-image pour le SEO et l'accessibilité.
Conclusion
La propriété object-fit est un outil essentiel du CSS moderne qui résout élégamment le problème du redimensionnement des images et vidéos. Combinée avec object-position et aspect-ratio, elle offre un contrôle total sur l'affichage de vos médias.
Chez Tourak Digital, nous optimisons chaque image pour un rendu parfait sur tous les écrans. Contactez-nous pour un site web visuellement irréprochable.