object-position CSS propriété

Définition de la CSS object-position.

La propriété CSS object-position permet de spécifier le positionnement d'un élément dit remplacé à l'intérieur de sa boite dont les dimensions sont définies par les propriétés Css width et height.

Exemple de syntaxe CSS object-position :

object-position : 50px 10px; 
object-position : 50% 10px;
object-position : left center;
object-position : center right;
object-position : top 50%;

La propriété de feuille de style object-position CSS peut prendre une ou deux valeurs de position :

numérique numérique : première valeur correspond à sa position sur l'axe X et la seconde correspond à sa position sur l'axe Y. X et Y sont suivis d'une unité de longueur CSS hors % et utilise comme point d'origine le coin haut gauche de la zone d'arrière-plan. Si une seule valeur, cela revient à mettre en Y 50%.
pourcentageX pourcentageY : identique au numérique, à la différence du positionnement.
Le point pourcentageX de l'élément remplacé doit être placés au point pourcentageX de la surface de l'élément.
Le point pourcentageY de l'élément remplacé doit être placés au point pourcentageY de la surface de l'élément.
top left ou left top : revient à positionner l'élément remplacé en '0% 0%'. Valeur par défaut.
top : positionne l'élément remplacé en '50% 0%'.
top center ou center top : positionne l'élément remplacé en '50% 0%'.
right top ou top right : positionne l'élément remplacé en '100% 0%'.
left : positionne l'élément remplacé en '0% 50%'.
left center ou center left : positionne l'élément remplacé en '0% 50%'.
center ou center center : positionne l'élément remplacé en '50% 50%'.
right : positionne l'élément remplacé en'100% 50%'.
right center, ou center right : positionne l'élément remplacé en '100% 50%'.
bottom left ou left bottom : positionne l'élément remplacé en '0% 100%'.
bottom : positionne l'élément remplacé en '50% 100%'.
bottom center, ou center bottom : positionne l'élément remplacé en '50% 100%'.
bottom right ou right bottom : positionne l'élément remplacé en '100% 100%'.
inherit : l'élément remplacé hérite de la valeur du object-position de son parent.
numerique mot cle : vous pouvez aussi mixer un mot clé et un numérique ou un pourcentage.

Exemple de code object-position CSS

Conditions d'application de la CSS object-position.

La propriété CSS object-position est applicable sur l'ensemble des balises HTML ou XHTML dites remplacées.

Héritage des valeurs Css de object-position.

Les balises filles HTML ou XHTML n'héritent pas de la propriété Css object-position.

Problème d'interprétation de object-position en Css.

La propriété de feuille de style object-position CSS ne pose aucun problème d'interprétation, hormis pour Edge qui n'accepte que IMG comme élément remplacé (02-2020).

Conditions d'animation de object-position en CSS3.

La CSS object-position est une propriété de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.

Règles de syntaxes CSS pour object-position.

Calcul d'une valeur de object-position en %

La valeur est calculée en fonction de la valeur calculée de la propriété CSS width ou de height de sa boite.

Les éléments remplacés

Les éléments dit remplacés sont :

img,
video,
iframe,
embed,
object,
input type="image".

L'utilisation de la propriété Css content avec comme valeur url()

Compatibilités navigateurs de la propriété object-position

Détails des versions de la CSS object-position: Propriété object-position est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS object-position: Propriété CSS object-position est compatible à partir de Chrome 31; Propriété CSS object-position est compatible à partir de Firefox 36; Propriété CSS object-position est compatible à partir de Internet Explorer ou Edge 16; Propriété CSS object-position est compatible sous une forme préfixée avec Opera 11.6; Propriété CSS object-position est compatible à partir de Opera 19; Propriété CSS object-position est compatible à partir de Safari 10; Propriété CSS object-position est compatible à partir de Chrome Android 31; Propriété CSS object-position est compatible à partir de Firefox Android 36; Propriété CSS object-position est compatible à partir de iOS Safari 10

Propriétés CSS préfixées de object-position

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété object-position CSS :

Pour rendre compatible la propriété object-position CSS avec le plus grand nombre de navigateurs, vous devez utiliser les versions préfixées suivante :

Versions préfixées de object-fit :

-o-object-position : 50% 50%;
object-position : 50% 50%;
overflow : hidden;

Votre avis sur la définition object-position en CSS

Votez pour la définition CSS `object-position`

Votes: 5 / 5 - 1 vote
Cliquez sur une étoile pour voter.

Définitions annexes à la Css object-position

Définitions CSS annexes object-position

content: La propriété CSS CONTENT permet de spécifier en CSS un texte, une image ou des guillemets à insérer en tant que contenu Css. content est utilisée avec...[ content ]
height: La propriété de Hauteur CSS HEIGHT permet de spécifier la hauteur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CSS...[ height ]
width: La propriété de Longueur CSS WIDTH permet de spécifier la longueur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CS...[ width ]

Définitions HTML annexes object-position

img: La balise HTML et XHTML IMG permet de mettre une image dans le document html. <IMG> Exemple :<img src="../images/balise/rouge.gif" width="50" height="...[ img ]