Propriété CSS object-position

❮ Précédent Suivant ❯

La propriété object-position est utilisée ensemble avec la propriété object-fit pour spécifier comment un élément doit être positionné avec des coordonnées x/y coordinates au sein de sa boîte du contenu. La première valeur contrôle l'axe X et la deuxième valeur contrôle l'axe Y.

Cette propriété peut être spécifiée par une chaîne (gauche, milieu ou droite), ou par un nombre (en px ou %).

Valeurs négatives sont valides.

Valeur initiale	50% 50%
Appliquée à	Éléments remplacés.
Héritée	Oui.
Animable	Oui. L'image est animable.
Version	CSS3
Syntaxe DOM	object.style.objectPosition = "20% 0%";

Syntaxe

object-fit: position | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      border: 2px solid #8ebf42;
      object-fit: none;
      object-position: 50% 50%;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété object-position</h2>
    <h3>Image originelle:</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>

Essayez-vous-même!

Voici un exemple, où object-position est spécifiée comme "left":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      border: 2px solid #8ebf42;
      object-fit: none;
      object-position: left;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété object-position</h2>
    <h3>Image originelle:</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>

Essayez-vous-même!

Exemple, où la première valeur est spécifiée par "px" et la deuxièeme par "%":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img.tree {
      width: 200px;
      height: 400px;
      border: 2px solid #8ebf42;
      object-fit: none;
      object-position: 10px 20%;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété object-position</h2>
    <h3>Image originelle:</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>

Essayez-vous-même!

Valeurs

Valeur	Description
position	Spécifie la position de l'élément dans sa boîte du contenu.
initial	Fait la propriété utiliser sa valeur initiale.
inherit	Hérite la propriété de son élément parent.