Object-position - Propriété CSS

Schéma de la syntaxe de object-position.

Description des termes utilisés sur le schéma :

• length sont des valeurs numériques, positives ou négatives, suivies d'une des unités de dimension.
• % sont des pourcentages, calculés d'après les dimensions du contenu et celles de l'objet.

Description de la propriété object-position.

object-position définit la position d'une image ou d'une vidéo lorsque les dimensions originales sont différentes des dimensions imposées.

Voir aussi la propriété object-fit pour gérer les dimensions de l'objet (image ou vidéo) par rapport à son container.

Valeurs pour object-position.

• object-position: left top; x y

  Deux valeurs séparées par un espace. Elles positionnent le contenu multimédia dans l'élément. La première horizontalement, et la deuxième verticalement.

  La valeur x peut être left, center ou right.
  La valeur y peut être top, center ou bottom.
  

  Si une seule des deux valeurs est précisée, l'autre est fixée à center, qui est la valeur par défaut.

• object-position: 100px 100px; x y

  La position du contenu multimédia peut également être définie par deux valeurs, positives ou négatives, suivies d'une unité de dimension (voir les unités de dimension).

  S'il s'agit de pourcentages, ils seront calculés par rapport à la largeur et à la hauteur de l'élément. Les formules de calcul, qui prennent en compte les dimensions du contenu multimédia, aussi bien que celles de l'élément, permettent de positionner le contenu au centre de l'élément pour la valeur 50%. La formule est la suivante :

  p% x (D - d)
p% est le pourcentage demandé.
  D est la largeur de l'élément.
  d est la largeur du contenu.
  Il existe évidement une formule identique pour le positionnement en hauteur.

  Exemple : un élément de 300 pixels de large, contient une vidéo dont la largeur intrinsèque est de 150 pixels. La position horizontale de la vidéo est à 30%. Ce qui donne après calcul :
  30% x (300 - 150) = 45 pixels.

• object-position: initial; (50% 50%) object-position: inherit; object-position: revert; object-position: revertLayer; object-position: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de object-position.

L'animation ci-dessous se décompose en 4 étapes, correspondant aux 4 mouvements :
- De gauche à droite,
- Du haut vers le bas,
- De droite à gauche,
- Du bas vers le haut pour terminer le tour.
Les intervalles de temps ont été calculés pour que la vitesse du ballon soit constante bien qu'il parcourt plus de distance horizontalement que verticalement.

Rappelons que object-position n'est opérationnelle que si les dimensions de l'image (ou la vidéo) sont définies à des valeurs différentes des valeurs natives, et que le propriété object-fit n'a pas la valeur fill (sinon l'image emplit tout l'espace imposé).

Exemple interactif avec la propriété object-position.

Compatibilité des navigateurs avec object-position.

On a une bonne compatibilité de tous les navigateurs pour ce qui est du traitement de object-position, sauf pour l'ancien navigateur Internet Explorer, mais qui n'est maintenant plus utilisé.

1

Propriété
object-position

Estimation de la prise en charge globale.

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété object-position.

• Module CSS - Image niveau 3

  Première présentation de la propriété object-position.
  

  23 Juillet 2009

  Document de travail.

  

  17 Avril 2012

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des images.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété object-position fait partie du module CSS Images Module. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

Fonctions :