Propriété CSS object-fit
Utilisez la propriété CSS object-fit pour définir comment un élément s'adapte à son conteneur. Découvrez les valeurs avec des exemples.
La propriété CSS object-fit contrôle la façon dont un élément remplacé — tel qu'un <img> ou un <video> — est redimensionné pour remplir sa boîte de contenu. C'est l'équivalent pour les images et vidéos de background-size : au lieu d'étirer ou de déformer le média, vous décidez s'il doit remplir, s'adapter, être rogné ou rester intact à l'intérieur de la boîte que vous lui avez attribuée.
Cette page explique ce que fait object-fit, quand l'utiliser, chacune de ses valeurs avec un exemple interactif, et les propriétés associées qui permettent d'affiner le résultat.
Pourquoi utiliser object-fit
Lorsque vous définissez une width et une height fixes sur une image dont le ratio d'aspect diffère de cette boîte, le navigateur étire l'image par défaut — les visages sont écrasés, les logos se déforment. object-fit résout ce problème. Il vous permet de conserver les dimensions de la boîte (important pour des mises en page et des grilles prévisibles) tout en indiquant au navigateur comment concilier le ratio d'aspect naturel de l'image avec cette boîte :
- Utilisez
coverpour les images hero, les vignettes et les avatars — remplissez la boîte, rognez le débordement, sans jamais déformer. C'est la valeur la plus souvent utilisée. - Utilisez
containlorsque toute l'image doit rester visible (logos, photos de produits), même si cela laisse de l'espace vide. - Utilisez
fill(la valeur par défaut) uniquement lorsque vous souhaitez réellement que l'image soit étirée pour correspondre exactement à la boîte.
Par défaut, l'image est centrée à l'intérieur de sa boîte. Pour contrôler quelle partie est conservée lors du rognage avec cover, combinez object-fit avec object-position.
| Valeur initiale | fill |
|---|---|
| S'applique à | Les éléments remplacés (<img>, <video>, <object>, etc.). |
| Hérité | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.objectFit = "cover"; |
Syntaxe
Syntaxe CSS de object-fit
object-fit: fill | contain | cover | scale-down | none | initial | inherit;Dans chaque exemple ci-dessous, la boîte mesure 200px de large et 400px de haut — une boîte haute et étroite — tandis que l'image source est au format paysage. Cette différence est ce qui rend le comportement de chaque valeur visible.
Exemple de la propriété object-fit avec la valeur "fill"
fill (la valeur par défaut) ignore le ratio d'aspect et étire l'image pour correspondre exactement à la boîte, ce qui donne un arbre aplati.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: fill;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Fill value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Résultat
L'image est étirée pour s'adapter à la boîte, ce qui la déforme. La valeur suivante, cover, résout ce problème en rognant plutôt qu'en étirant.
Exemple de la propriété object-fit avec la valeur "cover"
cover met l'image à l'échelle pour remplir toute la boîte tout en préservant son ratio d'aspect, puis coupe ce qui dépasse. Rien n'est déformé, mais les bords peuvent être coupés. C'est le choix idéal pour les vignettes et les bannières hero.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Cover value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Exemple de la propriété object-fit avec la valeur "contain"
contain met l'image à l'échelle pour s'adapter à l'intérieur de la boîte tout en préservant son ratio d'aspect, de sorte que toute l'image reste visible. Comme la boîte est plus haute que l'image est large, cela laisse des bandes vides au-dessus et en dessous (souvent appelé letterboxing).
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: contain;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Contain value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Exemple de la propriété object-fit avec la valeur "none"
none conserve l'image à sa taille intrinsèque (naturelle) et ignore entièrement les dimensions de la boîte. L'image est centrée, et toute partie qui dépasse la boîte est coupée. Utilisez-la lorsque vous devez préserver la taille en pixels originale.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: none;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>None value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Exemple de la propriété object-fit avec la valeur "scale-down"
scale-down compare none et contain et utilise celui qui produit l'image rendue la plus petite. En pratique, il se comporte comme contain pour les images plus grandes que la boîte, et comme none pour les images plus petites — un moyen sûr de réduire les médias trop grands sans jamais agrandir les petites images.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: scale-down;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Scale-down value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| fill | Par défaut. Étire le contenu pour remplir exactement la boîte de contenu, en ignorant son ratio d'aspect (l'image peut être déformée). |
| contain | Met le contenu à l'échelle pour s'adapter à l'intérieur de la boîte tout en préservant son ratio d'aspect ; de l'espace vide peut apparaître (letterboxing). |
| cover | Met le contenu à l'échelle pour remplir la boîte tout en préservant son ratio d'aspect ; les bords qui débordent sont coupés. |
| none | Conserve le contenu à sa taille intrinsèque, en ignorant la boîte ; centré et coupé en cas de débordement. |
| scale-down | Affiche le contenu comme le plus petit de none et contain — ne met jamais l'image à l'échelle supérieure. |
| initial | Fait utiliser à la propriété sa valeur par défaut (fill). |
| inherit | Hérite la propriété de son élément parent. |
Compatibilité des navigateurs et conseils
object-fit est pris en charge par tous les navigateurs modernes. Gardez ces points à l'esprit :
- Il n'affecte que les éléments remplacés (
<img>,<video>,<object>, SVG intégré). Il ne fait rien sur un<div>— utilisezbackground-sizeà la place. - L'élément occupe toujours la
width/heightque vous avez définie ;object-fitne change que la façon dont le contenu est affiché à l'intérieur de cette boîte. - Combinez-le avec
object-positionpour choisir quelle partie de l'image reste visible lors de l'utilisation decoverounone. - Si le débordement rogné doit rester masqué, la boîte le coupe déjà ; apprenez-en plus dans CSS overflow.