object-position : Propriété CSS pour positionner un élément

La propriété CSS object-position est un outil puissant pour les développeurs web qui souhaitent contrôler la position d’un élément remplacé à l’intérieur de son conteneur. Cela s’applique principalement aux éléments tels que les images <img>, les vidéos <video>, et d’autres éléments qui peuvent avoir un contenu de remplacement.

La propriété object-position

• object-position: 50% 50%;
• object-position: right bottom;
• object-position: left top;
• object-position: 300px 300px;

Qu’est qu’un élément remplacé ?

En CSS, un élément remplacé est un élément dont le contenu et la représentation sont définis par une source externe, comme une image, une vidéo ou encore certains éléments de formulaires.

Ces éléments ont un comportement particulier par rapport aux autres éléments HTML car leur apparence est déterminée par le navigateur et non par les styles CSS.

Voici quelques exemples d’éléments remplacés courants :

• <img> : pour les images
• <video> : pour les vidéos
• <audio> : pour les sons
• <object> : pour les objets embarqués (Flash, etc.)
• <input> : pour les champs de saisie de formulaires
• <textarea> : pour les zones de texte de formulaires
• <canvas> : pour les éléments graphiques générés par JavaScript

Syntaxe et valeurs de la propriété CSS object-position

La propriété CSS object-position détermine l’alignement de l’image ou de l’élément remplacé à l’intérieur de son conteneur. Par défaut, les éléments remplacés sont centrés dans leur conteneur, mais object-position permet de spécifier des coordonnées précises pour changer cela.

object-position: x y;

x : Position horizontale (peut être une valeur en pixels, en pourcentage, ou des mots-clés comme left, center, right).

y : Position verticale (peut être une valeur en pixels, en pourcentage, ou des mots-clés comme top, center, bottom).

/* Positionnement au centre */
object-position: 50% 50%;

Valeurs et mots-clés

Remplacez x et y par l’une des valeurs possibles, qui définit la position du contenu :

• Mots-clés :
  • top left : Aligne le contenu en haut à gauche.
  • top center : Centre le contenu horizontalement en haut de la boîte.
  • top right : Aligne le contenu en haut à droite.
  • center left : Centre le contenu verticalement à gauche de la boîte.
  • center : Centre le contenu horizontalement et verticalement.
  • center right : Centre le contenu verticalement à droite de la boîte.
  • bottom left : Aligne le contenu en bas à gauche.
  • bottom center : Centre le contenu horizontalement en bas de la boîte.
  • bottom right : Aligne le contenu en bas à droite.
• Valeurs numériques :
  • x% y% : Positionne le contenu à x% du bord horizontal et y% du bord vertical. Par exemple, 50% 50% correspond au centre.
  • px px : Décale le contenu de x pixels horizontalement et y pixels verticalement. Par exemple, 20px 10px déplace le contenu de 20 pixels vers la droite et 10 pixels vers le bas.
• Mots-clés et valeurs : Vous pouvez combiner les mots-clés et les valeurs numériques. Par exemple, top 50% positionne le contenu en haut de la boîte et le centre horizontalement.

Exemple d’utilisation de la propriété CSS object-position

Par défaut, une image est centrée à la fois horizontalement et verticalement. Cependant, nous pouvons ajuster cela pour montrer une partie spécifique de l’image.

<div class="container">
  <img src="example.jpg" alt="Exemple de poisitionnement avec object-position">
</div>

.container {
  width: 300px;
  height: 300px;
  overflow: hidden;
  border: 1px solid #dedede;
}

img {
  width: 80%;
  height: 80%;
  height: auto;
  object-fit: cover;
  object-position: top left;
}

Dans cet exemple, l’image est ajustée pour couvrir complètement le conteneur object-fit: cover, mais elle est alignée en haut à gauche grâce à object-position: top left. Cela signifie que le coin supérieur gauche de l’image sera toujours visible dans le conteneur.

• object-position ne fonctionne qu’avec les éléments remplacés.
• La propriété object-fit: cover est souvent utilisée en conjonction avec object-position pour contrôler le mode de redimensionnement du contenu.
• Le support navigateur pour object-position est excellent.

La propriété CSS object-position offre un outil puissant pour contrôler le positionnement précis du contenu dans les éléments HTML. En maîtrisant cette propriété, vous pouvez créer des mises en page attrayantes et réactives, en particulier pour les images et les vidéos. N’hésitez pas à expérimenter différentes valeurs et combinaisons pour obtenir les résultats souhaités.