Object-position - Propriété CSS

object-position

Résumé des caractéristiques de la propriété `object-position`

Description rapide

Définit la position d'une image ou d'une vidéo par rapport à son container.

Statut

Standard

Utilisable sur

HTML

Pourcentages

Calculés d'après les dimensions de l'élément lui-même.

Valeur initiale

50% 50%

Héritée par défaut

Non.

Type d'animation

Computed value : lors d'une animation, la propriété object-position passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Images

Références (W3C)

CSS Images Module Level 3

Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de `object-position`.

Schéma syntaxique de la propriété object-position
Cliquez sur le schéma pour plus de détails sur les valeurs

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

length sont des valeurs numériques, positives ou négatives, suivies d'une des unités de dimension.
% sont des pourcentages, calculés d'après les dimensions du contenu et celles de l'objet.

Description de la propriété `object-position`.

object-position définit la position d'une image ou d'une vidéo lorsque les dimensions originales sont différentes des dimensions imposées.

Voir aussi la propriété object-fit pour gérer les dimensions de l'objet (image ou vidéo) par rapport à son container.

Valeurs pour `object-position`.

object-position: left top; x y

Deux valeurs séparées par un espace. Elles positionnent le contenu multimédia dans l'élément. La première horizontalement, et la deuxième verticalement.

La valeur x peut être left, center ou right.
La valeur y peut être top, center ou bottom.

Si une seule des deux valeurs est précisée, l'autre est fixée à center, qui est la valeur par défaut.
object-position: 100px 100px; x y

La position du contenu multimédia peut également être définie par deux valeurs, positives ou négatives, suivies d'une unité de dimension (voir les unités de dimension).

S'il s'agit de pourcentages, ils seront calculés par rapport à la largeur et à la hauteur de l'élément. Les formules de calcul, qui prennent en compte les dimensions du contenu multimédia, aussi bien que celles de l'élément, permettent de positionner le contenu au centre de l'élément pour la valeur 50%. La formule est la suivante :

p% x (D - d)
p% est le pourcentage demandé.
D est la largeur de l'élément.
d est la largeur du contenu.
Il existe évidement une formule identique pour le positionnement en hauteur.

Exemple : un élément de 300 pixels de large, contient une vidéo dont la largeur intrinsèque est de 150 pixels. La position horizontale de la vidéo est à 30%. Ce qui donne après calcul :
30% x (300 - 150) = 45 pixels.

Valeurs globales
(communes à toutes les propriétés)


object-position: initial  (50% 50%)
object-position: inherit
object-position: revert
object-position: revertLayer
object-position: unset

Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Animation de la propriété `object-position`.

L'animation ci-dessous se décompose en 4 étapes, correspondant aux 4 mouvements :
- De gauche à droite,
- Du haut vers le bas,
- De droite à gauche,
- Du bas vers le haut pour terminer le tour.
Les intervalles de temps ont été calculés pour que la vitesse du ballon soit constante bien qu'il parcourt plus de distance horizontalement que verticalement.

Rappelons que object-position n'est opérationnelle que si les dimensions de l'image (ou la vidéo) sont définies à des valeurs différentes des valeurs natives, et que le propriété object-fit n'a pas la valeur fill (sinon l'image emplit tout l'espace imposé).

Prise en charge par les navigateurs (compatibilité).

On a une bonne compatibilité de tous les navigateurs pour ce qui est du traitement de object-position, sauf pour l'ancien navigateur Internet Explorer, mais qui n'est maintenant plus utilisé.

Propriété
object-position

Estimation de la prise en charge globale.

94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `object-position`.

Module CSS - Image niveau 3

Première présentation de la propriété object-position.

23 Juillet 2009
Document de travail.
17 Avril 2012
Candidat à la recommandation.

Voir aussi, au sujet des images.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété object-position fait partie du module CSS Images Module. Les définitions suivantes sont également décrites dans ce même module.