Position de l'objet - Astuces CSS

La object-positionpropriété est utilisée en conjonction avec object-fitproperty et définit comment un élément tel qu'une vidéo ou une image est positionné avec les coordonnées X / Y à l'intérieur de sa zone de contenu. Cette propriété prend deux valeurs numériques, telles que 0 10%ou 0 10px. Dans ces exemples, le premier chiffre indique que l'image doit être placée à gauche de la zone de contenu (0), le second qu'elle doit être positionnée à 10% ou 10 px du haut. Il est également possible d'utiliser des valeurs négatives.

La valeur par défaut de object-positionest 50% 50%lorsque vous utilisez la object-fitpropriété sur une image, de sorte que par défaut toutes les images sont positionnées au centre de leur zone de contenu, comme ceci:

img ( object-fit: none; object-position: 50% 50%; /* default value: image is centered*/ object-position: 0 0; /* positioned top left of the content box */ )

Démo

Vous trouverez ci-dessous quelques exemples de la manière dont nous pouvons manipuler object-positionune image avec la object-fitpropriété définie sur none. Si le contenu de l'image ne remplit pas la zone de contenu pour une raison quelconque, alors l'espace vide affichera l'arrière-plan de l'élément, qui peut être une couleur ou même un background-image, comme dans le dernier exemple:

Voir la position de l'objet Pen par Robin Rendle (@robinrendle) sur CodePen.