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

sé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 :

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

img {
	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 :

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

img {
	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 :

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

img {
	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 :

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

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