Propriété object-fit

La propriété object-fit définit le rapport d'aspect ou la mise à l'échelle d'éléments tels que les images ou les vidéos.

Syntaxe

csssélecteur {
  object-fit: fill ou contain ou cover ou none;
}

Le tableau présente les valeurs principales de la propriété object-fit :

Valeur	Description
`fill`	Mise à l'échelle de l'élément pour correspondre aux dimensions spécifiées, en ignorant les proportions de l'élément.
`contain`	Mise à l'échelle de l'élément pour correspondre aux dimensions spécifiées, en conservant les proportions de l'élément.
`cover`	Les dimensions de l'élément sont modifiées pour remplir entièrement la zone spécifiée, tout en conservant les proportions de l'élément lui-même.
`none`	Les dimensions originales de l'élément sont conservées.

Définissons pour notre image un remplissage de la taille spécifiée sans conserver les proportions :

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: fill;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Maintenant, faisons en sorte que l'image remplisse le conteneur spécifié en conservant les proportions :

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: contain;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Remplissons notre image dans le conteneur spécifié de manière à ce que la taille de l'image elle-même change, tout en conservant ses proportions :

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: cover;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Plaçons simplement notre image dans le conteneur spécifié en conservant ses dimensions d'origine :

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: none;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат: