object-position
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
La propriété CSS object-position définit l'alignement du contenu d'un élément remplacé au sein de la boîte de l'élément. Les zones de la boîte qui ne sont pas couvertes par l'objet de l'élément remplacé afficheront l'arrière-plan de l'élément.
Il est possible de modifier la taille intrinsèque de l'objet de l'élément remplacé (c'est-à-dire sa taille naturelle) pour l'adapter à la boîte de l'élément en utilisant la propriété object-fit.
Exemple interactif
object-position: 50% 50%;
object-position: right top;
object-position: left bottom;
object-position: 250px 125px;
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/moon.jpg" />
</section>
#example-element {
height: 250px;
width: 250px;
object-fit: none;
border: 1px solid red;
}
Syntaxe
/* Valeurs avec un mot-clé */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;
/* Valeurs de type <percentage> */
object-position: 25% 75%;
/* Valeurs de type <length> */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;
/* Valeurs de décalage par rapport aux bords */
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;
/* Valeurs globales */
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;
Valeurs
<position>-
De une à quatre valeurs qui définissent la position en 2D de l'élément. Des décalages relatifs ou absolus peuvent être utilisés.
Note : La position peut être définie de manière à ce que l'élément remplacé soit dessiné en dehors de sa boîte.
Définition formelle
| 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 |
| Valeur calculée | comme défini |
| Type d'animation | une liste répétable |
Syntaxe formelle
object-position =
<position>
<position> =
<position-one> |
<position-two> |
<position-four>
<position-one> =
left |
center |
right |
top |
bottom |
x-start |
x-end |
y-start |
y-end |
block-start |
block-end |
inline-start |
inline-end |
<length-percentage>
<position-two> =
[ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ block-start | center | block-end ] && [ inline-start | center | inline-end ] |
[ start | center | end ]{2}
<position-four> =
[ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] |
[ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] |
[ [ start | end ] <length-percentage> ]{2}
<length-percentage> =
<length> |
<percentage>
Exemples
Positionner le contenu d'une image
HTML
Dans ce fragment HTML, on a deux éléments HTML <img>, chacun affichant le logo de MDN.
<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.
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
Spécifications
| Spécification |
|---|
| CSS Images Module Level 3 # the-object-position |
Compatibilité des navigateurs
Voir aussi
- Les autres propriétés CSS associées aux images :
object-fit,image-orientation,image-rendering,image-resolution.