CSS propriété object-position
Propriété object-position en CSS
La propriété CSS object-position est utilisée avec la propriété object-fit pour spécifier comment un <img> ou <video> doit être positionné avec des coordonnées x/y à l'intérieur de son conteneur.
La première valeur contrôle l'axe x et la deuxième valeur contrôle l'axe y. La valeur peut être une chaîne (gauche, centre ou droite) ou un nombre (en px ou %). Les valeurs négatives sont également autorisées.
Utilisation de la propriété object-position
Supposons que la partie de l'image affichée ne soit pas celle que nous souhaitons. Pour positionner l'image, nous allons utiliser la propriété object-position .
Ici, nous positionnons l'image de manière à ce que le grand vieux bâtiment soit au centre :
Exemple
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 80% 100%;
} Ici, nous allons utiliser la propriété object-position pour positionner l'image de manière à ce que la célèbre Tour Eiffel soit au centre :
Exemple
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 15% 100%;
} Propriétés CSS Object-*
Le tableau suivant répertorie les propriétés CSS object-* :
| Propriété | Description |
|---|---|
| object-fit | Spécifie comment un <img> ou <video> doit être redimensionné pour s'adapter à son conteneur |
| object-position | Spécifie comment un <img> ou <video> doit être positionné avec des coordonnées x/y à l'intérieur de sa "propre boîte de contenu" |