Propiedad object-fit

La propiedad object-fit establece la relación de aspecto o el escalado de elementos como imágenes o videos.

Sintaxis

selector {
	object-fit: fill o contain o cover o none;
}

La tabla presenta los valores principales para la propiedad object-fit:

Valor	Descripción
`fill`	Escala el elemento para ajustarse a las dimensiones especificadas, ignorando las proporciones del elemento.
`contain`	Escala el elemento para ajustarse a las dimensiones especificadas, manteniendo las proporciones del elemento.
`cover`	Las dimensiones del elemento se cambian para llenar completamente el área especificada, manteniendo las proporciones del elemento.
`none`	Se conservan las dimensiones originales del elemento.

Vamos a establecer que nuestra imagen llene el tamaño especificado sin mantener las proporciones:

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

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

Y ahora hagamos que la imagen llene el contenedor especificado manteniendo las proporciones:

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

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

Llenemos nuestro contenedor especificado con la imagen de modo que el tamaño de la imagen misma cambie, pero manteniendo sus proporciones:

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

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

Simplemente coloquemos nuestra imagen en el contenedor especificado manteniendo sus dimensiones originales:

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

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