object-position

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

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'animationune liste répétable de , une simple liste de , une longueur, pourcentage ou calc() ;
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

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

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

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/6457/mdn_logo_only_color.png" alt="Logo MDN"/>
<img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="Logo MDN"/>

CSS

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  background-color: yellow;
  margin-right: 1em;
}

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

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

Résultat

Spécifications

Spécification Statut Commentaires
CSS Image Values and Replaced Content 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 Image Values and Replaced Content 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é Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 31.0 36 (36) Pas de support 11.60-o
19.0
10[1]
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 4.4.4 36 (36) Pas de support 11.5-o
24
Pas de support

[1] Corrigé avec la version Nightly de Webkit, avec le correctif du bug 122811.

Voir aussi

Étiquettes et contributeurs liés au document

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