Propriété CSS object-fit
La propriété object-fit est utilisée pour spécifier comment un élément doit être redimensionné afin de s’adapter à sa boîte de contenu.
La propriété object-fit permet d’adapter le contenu d’une image aux dimensions spécifiées dans la feuille de style.
Le contenu peut être défini pour s’agrandir ou se réduire, se contracter ou s’étirer afin de s’adapter à la largeur et à la hauteur spécifiées à l’aide des valeurs de la propriété. Il existe cinq valeurs :
- fill
- contain
- cover
- none
- scale-down
| Valeur initiale | fill |
|---|---|
| S’applique à | Éléments remplacés. |
| Héritée | 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;Exemple de la propriété object-fit avec la valeur "fill" :
Exemple de la propriété object-fit avec la valeur "fill" :
<!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="https://fr.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Fill value:</h3>
<img class="tree" src="https://fr.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Résultat
Ici, l’image avec la valeur appliquée est étirée pour s’adapter à la boîte. Dans l’exemple suivant, la valeur "cover" coupe les côtés d’une image, préserve le ratio d’aspect et remplit également l’espace.
Exemple de la propriété object-fit avec la valeur "cover" :
Exemple de la propriété object-fit avec la valeur "cover" :
<!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="https://fr.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Cover value:</h3>
<img class="tree" src="https://fr.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Dans l’exemple suivant, l’image avec la valeur appliquée conserve le ratio d’aspect de l’image d’origine.
Exemple de la propriété object-fit avec la valeur "contain" :
Exemple de la propriété object-fit avec la valeur "contain" :<
<!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="https://fr.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Contain value:</h3>
<img class="tree" src="https://fr.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Dans notre dernier exemple, la valeur appliquée définit l’image à une taille plus petite, comme si "contain" ou "none" avaient été spécifiés.
Exemple de la propriété object-fit avec la valeur "scale-down" :
Exemple CSS de object-fit scale-down
<!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="https://fr.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Scale-down value:</h3>
<img class="tree" src="https://fr.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Valeurs
| Value | Description |
|---|---|
| fill | Le contenu est redimensionné autant que possible pour remplir la boîte de contenu. C’est la valeur par défaut de cette propriété. |
| contain | Le ratio d’aspect du contenu est agrandi autant que possible tout en restant contenu dans les limites de l’élément. |
| cover | Le ratio d’aspect du contenu est ajusté tout en remplissant la boîte de contenu de l’élément. Il sera rogné pour s’adapter à la boîte de contenu. |
| none | Aucun contenu redimensionné. |
| scale-down | Identique aux valeurs none ou contain. Le contenu de l’élément sera dans une taille plus petite. |
| initial | Fait utiliser à la propriété sa valeur par défaut. |
| inherit | Hérite de la propriété de l’élément parent. |
Practice
What are the possible values for the 'object-fit' property in CSS?