Propriété CSS object-position
Exemple
Redimensionnez une image pour l'adapter à sa zone de contenu et positionnez l'image à 5 px de la gauche et à 10 % du haut à l'intérieur de la zone de contenu :
img.a {
width: 200px;
height:
400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
Définition et utilisation
La object-position
propriété est utilisée avec object-fit pour spécifier comment un <img> ou <video> doit être positionné avec les coordonnées x/y à l'intérieur de sa "propre zone de contenu".
Valeur par défaut: | 50% 50% |
---|---|
Hérité: | Oui |
Animable : | Oui. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.objectPosition="0 10%" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Property | |||||
---|---|---|---|---|---|
object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
Syntaxe CSS
object-position: position|initial|inherit;
Valeurs de propriété
Value | Description |
---|---|
position | Specifies the position of the image or video inside its content box. First value controls the x-axis and the second value controls the y-axis. Can be a string (left, center or right), or a number (in px or %). Negative values are allowed |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Pages connexes
Tutoriel CSS : ajustement d'objet CSS
Référence CSS : ajustement d'objet CSS
Référence HTML DOM : la propriété objectPosition