Object-fit en CSS
Float enveloppait le texte à côté des médias. object-fit répond à une autre question : quand un img ou une video est dans un cadre de taille fixe, comment le contenu doit-il remplir ce cadre ? Maîtrisez cover et contain avant d’étirer les visages avec fill.
Une boîte à outils object-fit
📊 Object-fit en un coup d’œil
| Valeur | Rôle au quotidien |
|---|---|
fill |
Étire jusqu’à la boîte — peut déformer le ratio |
contain |
Fait tenir tout le média ; des bandes vides possibles |
cover |
Remplit la boîte ; peut rogner les bords |
none |
Garde la taille intrinsèque ; débordement ou trous possibles |
scale-down |
Comme none ou contain — le plus petit des deux |
object-position |
Vise la partie qui reste visible au rognage / ajustement |
object-fit ne brille que lorsque l’élément remplacé a une largeur et une hauteur définies (ou les deux axes contraints). Une image libre en hauteur auto n’a pas de cadre dans lequel « s’ajuster ».
Cover — remplir le cadre, autoriser le rognage
Les cartes et miniatures hero veulent souvent chaque pixel de la boîte rempli. cover agrandit et coupe le débordement. Associez une boîte carrée à cover pour des grilles soignées.
.card__media {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
Contain — montrer l’image entière
Les photos produit et schémas doivent souvent rester entièrement visibles. contain laisse des bandes (letterbox) si les ratios diffèrent — mieux une bande qu’un logo coupé.
.product__img {
width: 240px;
height: 240px;
object-fit: contain;
background: #f7f7f7;
}
Fill étire — à utiliser avec prudence
fill force le média à la taille de la boîte même si les proportions se déforment. Convient aux textures abstraites ; risqué pour visages, logos et graphiques.
.texture {
width: 320px;
height: 120px;
object-fit: fill;
}
object-position vise le rognage
Quand cover rogne, le centre par défaut peut cacher un visage ou un logo. Ajustez avec object-position — pourcentages ou mots-clés comme top et left.
.avatar {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
object-position: 50% 20%;
}
Une habitude object-fit sereine
Utilisez de vrais <img> / <video> avec object-fit pour les médias significatifs. Utilisez background-size quand l’image est un chrome CSS décoratif. Dimensionnez d’abord la boîte, choisissez cover ou contain, puis affinez la position.
.avatar {
width: 64px;
height: 64px;
object-fit: cover;
object-position: center top;
border-radius: 50%;
}
Essayez vous-même
- Donnez à une image largeur et hauteur fixes, puis testez
covervscontain. - Créez un avatar circulaire avec
coveret déplacezobject-position. - Appliquez
fillune fois et remarquez la déformation — puis revenez. - Comparez le même rognage en décoration
background-size: cover. - Écrivez une phrase : quand contain est-il plus sûr que cover ?
Erreurs fréquentes
- Attendre que
object-fitfonctionne sans boîte dimensionnée - Utiliser
fillsur portraits et logos - Confondre cette leçon avec le wrap float ou les offsets de position
- Mettre des photos significatives seulement en
background-image(alt plus difficile) - Oublier
object-positionquand cover cache le sujet
Résumé
object-fitajuste les médias remplacés dans un cadre dimensionnécoverremplit et peut rogner ;containmontre tout et peut letterboxerfillpeut déformer — utilisez-le avec parcimonieobject-positionvise la région visible- Préférez object-fit pour le contenu média ; background-size pour la décoration
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut