object-position

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

La propriété object-position détermine l'alignement d'un élément remplacé au sein de sa boîte. Les zones de la boîte qui ne sont pas recouvertes par le contenu de l'élément remplacé montreront l'arrière-plan de l'élément.

Note : Il est possible d'ajuster la taille de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété object-fit.

Exemple interactif

Syntaxe

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

/* Valeurs globales */
object-position: inherit;
object-position: initial;
object-position: revert;
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.

Définition formelle

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
Valeur calculéecomme spécifié
Type d'animationune liste répétable

Syntaxe formelle

object-position = 
<position>

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

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

Exemples

HTML

Dans ce fragment HTML, on a deux éléments <img>, chacun affichant le logo de MDN.

html
<img id="object-position-1" src="mdn.svg" alt="Logo MDN" />
<img id="object-position-2" src="mdn.svg" alt="Logo MDN" />

CSS

Le code CSS implique la mise en forme par défaut pour les éléments <img> et des styles différents pour les deux images.

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%;
}

La première image est positionnée avec son bord gauche situé à 10 pixels du bord gauche de la boîte de l'élément. La seconde image est positionnée avec son bord droit poussé sur le bord droit de la boîte de l'élément et est située vers le bas de 10% de la hauteur de la boîte de l'élément.

Résultat

must be provided

Spécifications

Specification
CSS Images Module Level 3
# the-object-position

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
object-position

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi