CSS La propriété object-position
La propriété CSS object-positionest utilisée pour spécifier comment un <img> ou <video> doit être positionné dans son conteneur.
L'image
Regardez l'image suivante de Paris, qui fait 400x300 pixels :
Ensuite, nous utilisons object-fit: cover;pour conserver le rapport d'aspect et pour remplir la dimension donnée. Cependant, l'image sera coupée pour s'adapter, comme ceci :
Exemple
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Utilisation de la propriété object-position
Disons que la partie de l'image qui s'affiche n'est pas positionnée comme nous le souhaitons. Pour positionner l'image, nous allons utiliser la object-positionpropriété.
Ici, nous allons utiliser la object-positionpropriété pour positionner l'image afin que le grand bâtiment ancien soit au centre :
Exemple
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 80% 100%;
}
Ici, nous allons utiliser la object-positionpropriété pour positionner l'image afin que la célèbre Tour Eiffel soit au centre :
Exemple
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 15% 100%;
}
Objet CSS-* Propriétés
Le tableau suivant répertorie les propriétés CSS object-* :
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-posititon | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |