object-position - Propriété CSS
Résumé des caractéristiques de la propriété object-position
50% 50%
object-position
passe progressivement d'une valeur à une autre.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
.
x
et y
sont des dimensions utilisées pour positionner l'objet.
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 êtreleft
,center
ouright
.
La valeury
peut êtretop
,center
oubottom
.
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 CSS 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.
- object-position:
initial
; object-position:inherit
; object-position:revert
; object-position:revert-layer
; object-position:unset
;La valeur initiale est :
.50% 50%
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é).
Simulateur.
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é.
object-position
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que object-position
.
Les spécifications CSS éditées par le W3C sont organisées en modules. object-position
fait partie du Module CSS - Images (CSS Images Module). Les définitions suivantes sont également décrites dans ce même module.