La propriété object-position détermine l'alignement d'un élément replacé au sein de sa boîte.
| Valeur initiale | 50% 50% |
|---|---|
| Applicabilité | éléments remplacés |
| Héritée | oui |
| Pourcentages | se rapporte à la largeur et à la hauteur de l'élément lui-même |
| Média | visuel |
| Valeur calculée | comme spécifié |
| Type d'animation | une liste répétable de , une simple liste de , une longueur, pourcentage ou calc() ; |
| Ordre canonique | l'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>où
<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>? ]]où
<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
- Les autres propriétés CSS liées aux images :
Étiquettes et contributeurs liés au document
Étiquettes :
Contributeurs à cette page :
SphinxKnight
Dernière mise à jour par :
SphinxKnight,