Propriété CSS object-position

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>

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>

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>

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.

Support de Navigateurs

31.0+ 16.0 partial 36.0+ 10.0+ 19.0+
11.6 -o-


Trouvez-vous cela utile?

Articles Associées