Attribut object-position CSS

Définition et utilisation

L'attribut object-position, utilisé avec object-fit, permet de définir comment utiliser les coordonnées x/y pour positionner <img> ou <video> dans leur "propre boîte de contenu".

Voir également :

Tutoriel CSS :object-fit CSS

Manuel de référence CSS :object-position CSS

Manuel de référence HTML DOM :Attribut objectPosition

Exemple

Ajuste la taille de l'image pour qu'elle s'adapte à sa boîte de contenu, et déplace l'image à partir de la gauche de 5px et du haut de 10% :

img.a {
  width: 200px;
  height: 400px;
  object-fit: none;
  object-position: 5px 10%;
  border: 5px solid red;
}

Essayez-le vous-même

Syntaxe CSS

object-position: position|initial|inherit;

Valeur de l'attribut

Valeur Description
position

Définit la position de l'image ou de la vidéo dans sa boîte de contenu.

La première valeur contrôle l'axe x, la deuxième valeur contrôle l'axe y.

Peut être une chaîne (gauche, centre ou droite) ou un nombre (en px ou %). Les valeurs négatives sont autorisées.
initial Réinitialise cette propriété à sa valeur par défaut. Voir : initial.
inherit Inherits this property from its parent element. Voir : inherit.

Détails techniques

Valeur par défaut : 50% 50%
Héritage : oui
Réalisation de l'animation : Supporté. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.objectPosition="0 10%"

Support du navigateur

Les nombres dans le tableau indiquent la première version de navigateur qui prend en charge cette propriété.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 10.0 19.0