object-fit

La propiedad object-fit especifica cómo se debe comportar un elemento respecto a su contenedor. Diseñado para imágenes, videos y otros formatos de multimedia.

object-fit permite modificar el elemento, dando control sobre como se reduce o estira respecto a su contenedor.

<img src="image.jpg" />
img {
    width: 400px;
    height: 400px;
    object-fit: cover;
}

Permite la configuración entre cinco distintos valores:

contain

Aumenta o disminuye el tamaño para llegar al contenedor, conservando la relación de aspecto. Es decir, el elemento completo se sigue visualizando, pero, se adapta al tamaño especificado.

img {
  width: 400px;
  height: 400px;
  border: 2px solid white;
  object-fit: contain;
}
Ejemplo en vivo

cover

Se adapta al ancho y altura del contenedor, manteniendo la relación de aspecto. Si la relación de aspecto no coincide con la del contenedor, entonces se realiza un recorte para rellenar el mismo.

img {
  width: 400px;
  height: 400px;
  border: 2px solid white;
  object-fit: cover;
}
Ejemplo en vivo

fill

Nota

El valor por defecto de los elementos.

Cambia el elemento para que se ajuste al contenedor, si la relación de aspecto no coincide, este se estira para rellenar todo el contenedor.

img {
  width: 400px;
  height: 400px;
  border: 2px solid white;
  object-fit: fill;
}
Ejemplo en vivo

none

El elemento ignora la altura y el ancho del contenedor, conservando su tamaño original, sin redimensionar el elemento.

img {
  width: 400px;
  height: 400px;
  border: 2px solid white;
  object-fit: none;
}
Ejemplo en vivo

scale-down

El elemento se dimensiona como si none o contain se especificaran, para encontrar el tamaño de objeto concreto más pequeño.

img {
  width: 400px;
  height: 400px;
  border: 2px solid white;
  object-fit: scale-down;
}
Ejemplo en vivo

Recursos

Comparte tu opinión o duda:
Se parte de mi newsletter

Compartiré contigo las últimas novedades del sitio y otros recursos sobre desarrollo web que no te puedes perder.