Propriété CSS object-position
Utilisez la propriété CSS object-position pour définir la position d'un élément dans son conteneur. Découvrez les valeurs et des exemples.
La propriété CSS object-position définit comment un élément remplacé — tel qu'un <img> ou une <video> — est positionné à l'intérieur de sa propre boîte. Un élément remplacé est un élément dont le contenu provient d'une source externe plutôt que de CSS, de sorte que le navigateur décide comment faire tenir ce contenu dans l'espace fourni par la boîte.
Seule, object-position ne produit aucun effet visible à moins que la taille intrinsèque de l'élément diffère de la taille de sa boîte. Ce décalage est créé par la propriété object-fit : une fois qu'object-fit redimensionne ou rogne le contenu (par exemple avec cover ou contain), object-position détermine quelle partie du contenu reste visible. Imaginez la boîte comme une fenêtre et l'image comme un tableau plus grand derrière elle — object-position fait glisser le tableau de façon à afficher une région différente.
La valeur s'écrit sous la forme d'une ou deux coordonnées : la première contrôle l'axe x (horizontal) et la seconde l'axe y (vertical). Si vous ne fournissez qu'une seule valeur, la seconde prend par défaut la valeur center.
/* keyword pairs */
object-position: left top;
object-position: right bottom;
/* lengths and percentages */
object-position: 10px 20%;
object-position: 50% 50%; /* the default — centered */Chaque coordonnée peut être un mot-clé (left, right, top, bottom, center), une longueur (px, em, …) ou un pourcentage. Un pourcentage de 0% aligne ce bord du contenu avec le même bord de la boîte ; 100% aligne les bords opposés.
Les valeurs négatives sont valides — object-position: -20px 0; fait déborder le contenu au-delà du bord gauche de la boîte, masquant cette bande.
| Valeur initiale | 50% 50% |
|---|---|
| S'applique à | Les éléments remplacés. |
| Héritage | Non. |
| Animatable | Oui. L'image est animatable. |
| Version | CSS3 |
| Syntaxe DOM | object.style.objectPosition = "20% 0%"; |
Syntaxe
object-position: <position> | initial | inherit;Exemples
Exemple avec la position par défaut (50% 50%)
La valeur par défaut centre le contenu. Comme object-fit: cover rogne l'image pour remplir la boîte, le centrage maintient la partie centrale de l'image visible.
<!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="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Object-position: 50% 50%</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Résultat
Exemple avec le mot-clé left
Avec left, l'axe horizontal se cale sur le bord gauche de la boîte (et l'axe vertical prend par défaut la valeur center), de sorte que le côté gauche de l'image rognée reste visible.
<!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="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Object-position: left</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Exemple avec une longueur et un pourcentage (10px 20%)
Vous pouvez mélanger les unités entre les deux axes. Ici, le contenu est décalé de 10px depuis la gauche et positionné à 20% de la hauteur de la boîte.
<!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="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Object-position: 10px 20%</h3>
<img class="tree" src="/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é à sa valeur par défaut. |
inherit | Hérite de la propriété depuis son élément parent. |
Quand l'utiliser
object-position est particulièrement utile pour le recadrage responsive d'images. Lorsqu'une photo doit remplir un conteneur de taille fixe (miniature de carte, bannière hero, avatar) avec object-fit: cover, le navigateur rogne ce qui ne rentre pas. Par défaut, il rogne de manière symétrique depuis le centre, ce qui peut couper la partie importante d'une photo — le visage d'une personne situé en haut, par exemple. Définir object-position: center top maintient cette région visible à la place.
Quelques points à retenir :
- Elle n'affecte que les éléments remplacés (
<img>,<video>,<input type="image">, parfois<object>). Elle n'a aucun effet sur une<div>. - Elle fonctionne de pair avec object-fit :
object-fitdécide comment le contenu est redimensionné ou rogné, etobject-positiondécide où se situe la fenêtre visible. - La syntaxe est identique à celle de la propriété background-position, donc les mêmes règles de mots-clés et de pourcentages s'appliquent.