La propriété object-position détermine l'alignement d'un élément remplacé au sein de sa boîte.

/* Valeurs de positionnement */
/* Type <position>           */
object-position: center top;
object-position: 100px 50px;

/* Valeurs globales */
object-position: inherit;
object-position: initial;
object-position: unset;

Valeur initiale50% 50%
Applicabilitééléments remplacés
Héritéeoui
Pourcentagesse rapporte à la largeur et à la hauteur de l'élément lui-même
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationrepeatable list of simple list of length, percentage, or calc
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

Valeurs

<position>
Une valeur de type <position>, c'est-à-dire une à quatre valeurs permettant de définir une position en deux dimensions par rapport aux limites de la boîte dans laquelle est placé l'élément. On peut donner des décalages absolus ou relatifs. On notera que la position peut être définie en dehors de la boîte de l'élément.

Syntaxe formelle

<position>


<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]


<length-percentage> = <length> | <percentage>

Exemples

HTML

<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>

CSS

img {
   width: 300px;
   height: 250px;
   border: 1px solid black;
   background-color: silver;
   margin-right: 1em;
   object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Images Module Level 4
La définition de 'object-position' dans cette spécification.
Version de travail Les mots-clés from-image et flip ont été ajoutés.
CSS Images Module Level 3
La définition de 'object-position' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple311636 Non

19

11.6 -o-

10
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple4.4.4 ? ?36

24

11.5 -o-

Non ?

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,