Propriété CSS object-position
La propriété object-position est utilisée avec la propriété object-fit pour spécifier comment la boîte de contenu d’un élément remplacé doit être positionnée dans sa boîte de remplissage à l’aide de coordonnées x/y. La première valeur contrôle l’axe des x et la seconde valeur contrôle l’axe des y.
Cette propriété peut être spécifiée par un mot-clé (left, center, right, top ou bottom), ou par un nombre (en px ou en %).
INFO
Les valeurs négatives sont valides.
| Valeur initiale | 50% 50% |
|---|---|
| S’applique à | Éléments remplacés. |
| Héritée | Non. |
| Animable | Oui. L’image est animable. |
| Version | CSS3 |
| Syntaxe DOM | object.style.objectPosition = "20% 0%"; |
Syntaxe
Syntaxe de CSS object-position
css
object-position: <position> | initial | inherit;Exemple de la propriété object-position :
Exemple de code CSS object-position
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
border: 2px solid #8ebf42;
object-fit: cover;
object-position: 50% 50%;
}
</style>
</head>
<body>
<h2>Object-position 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>Object-position: 50% 50%</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
Exemple de la propriété object-position spécifiée comme "left" :
Exemple CSS object-position left
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
border: 2px solid #8ebf42;
object-fit: cover;
object-position: left;
}
</style>
</head>
<body>
<h2>Object-position 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>Object-position: left</h3>
<img class="tree" src="https://fr.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Exemple de la propriété object-position spécifiée en "px" et "%" :
Exemple CSS object-position avec nombre
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
border: 2px solid #8ebf42;
object-fit: cover;
object-position: 10px 20%;
}
</style>
</head>
<body>
<h2>Object-position 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>Object-position: 10px 20%</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
| Valeur | Description |
|---|---|
<position> | Spécifie la position de l’élément remplacé à l’intérieur de sa boîte. Peut être un mot-clé (top, bottom, left, right, center) ou une combinaison de mots-clés, de pourcentages ou de longueurs. |
initial | Définit la propriété sur sa valeur par défaut. |
inherit | Hérite la propriété de son élément parent. |
Practice
What does the 'object-position' property in CSS do?