Propriété object-position CSS

CSS object-position l'attribut est utilisé pour spécifier la position de <img> ou <video> dans son conteneur.

image

Regardez l'image ci-dessous provenant de Wuhan, de taille 600x400 pixels :

Ensuite, nous utilisons object-fit: cover; pour maintenir le rapport d'aspect et remplir la taille donnée. Cependant, l'image sera coupée pour s'adapter, comme indiqué ci-dessous :

Exemple

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
}

Essayer vous-même

l'attribut object-position

Hypothétiquement, si la partie de l'image affichée n'est pas à l'endroit souhaité. Pour positionner l'image, nous allons utiliser object-position attribut.

Ici, nous allons utiliser object-position l'attribut pour positionner l'image, afin que l'ancien bâtiment soit au centre :

Exemple

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 50% 100%;
}

Essayer vous-même

Ici, nous allons utiliser object-position Utiliser des propriétés pour positionner l'image afin que le célèbre pavillon de l'angle du palais d'été soit à droite :

Exemple

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 25% 100%;
}

Essayer vous-même

Propriétés CSS object-*

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