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 :

CSS - Propriété object-position

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

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 dimensions en CSS).

    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;

    La valeur initiale est center.

  • object-position: unset; object-position: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

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