HTML & CSS

Propriété CSS object-position


Le CSS object-position La propriété est utilisée pour spécifier comment un ou


L’image

Regardez l’image suivante de Paris, qui fait 400×300 pixels :

Ensuite, nous utilisons object-fit: cover; pour conserver le rapport d’aspect et pour remplir la dimension donnée. Cependant, l’image sera coupée pour s’adapter, comme ceci :

Paris



Utilisation de la propriété object-position

Disons que la partie de l’image qui s’affiche n’est pas positionnée comme nous le souhaitons. Pour positionner l’image, nous utiliserons le object-position propriété.

Ici, nous utiliserons le object-position propriété de positionner l’image de manière à ce que le grand bâtiment ancien soit au centre :

Paris

Exemple

image {
largeur : 200 pixels ;
hauteur : 300px ;
conforme à l’objet : couverture ;
position de l’objet : 80 % 100 % ;
}

Essayez-le vous-même »

Ici, nous utiliserons le object-position propriété de positionner l’image de manière à ce que la célèbre Tour Eiffel soit au centre :

Paris

Exemple

image {
largeur : 200 pixels ;
hauteur : 300px ;
conforme à l’objet : couverture ;
position de l’objet : 15 % 100 % ;
}

Essayez-le vous-même »


Objet CSS-* Propriétés

Le tableau suivant répertorie les propriétés CSS object-* :

Propriété Description
ajustement à l’objet Spécifie comment un ou
position-objet Spécifie comment un ou

#Propriété #CSS #objectposition

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also
Close
Back to top button