Propiedad object-fit

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

Sintaxis

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

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

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

Результат:

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

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

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

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

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

Результат:

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

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

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

Результат: