Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

object-position - Propriété CSS

object-position

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

Description rapide
Position d'une image ou d'une vidéo par rapport à son container.
Statut
Standard
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)
Statut du document:: CRD (document proposé pour la recommandation)

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:
 left left center center right right x x top top center center bottom bottom y y
;
  • 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 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é).

Animation de object-position

Simulateur.

object-position :
object-position :
Exemple pour object-position (CSS)

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é.

1
object-position
Estimation de la prise en charge en pourcentage du parc actuel.
94%

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.

Propriétés.

Définit l'orientation d'une image (doit-elle être tournée ?)
Mode de mise à l'échelle des images.
Définit comment un contenu multimédia (image, vidéo) doit s'adapter aux dimensions de son contenant.

Fonctions.

Définit un dégradé de couleurs conique.
Réalise le mélange de plusieurs images.
Récupère l'aspect d'un élément sous forme d'une image.
Désigne ou définit une image.
Propose au navigateur un choix d'images.
Détermine un dégradé de couleur linéaire.
Détermine un dégradé de couleur radial (depuis le centre vers les bords).
Définit un dégradé de couleurs conique, avec répétition
Détermine un dégradé de couleur linéaire avec répétition.
Détermine un dégradé de couleur radial avec répétition.
Définit une image en bande de couleurs.