CSS IMAGENES: Propiedad object-fit

La propiedad CSS object-fit especifica cómo se debe ajustar el contenido de un elemento reemplazado a la caja establecida por su altura y ancho utilizados.

Ejemplo

HTML:

  

<div>
  <h2>object-fit: fill</h2>
  <img  width="60" height="60" src="https://www.onlinewebfonts.com/style/user.png" alt="example" class="fill"/>

  <img width="60" height="60"  src="https://pic.onlinewebfonts.com/svg/thumbnails_60_573798.png" alt="example" class="fill narrow"/>

  <h2>object-fit: contain</h2>
  <img  width="60" height="60" src="https://www.onlinewebfonts.com/style/user.png" alt="example" class="contain"/>

  <img  width="60" height="60" src="https://pic.onlinewebfonts.com/svg/thumbnails_60_573798.png" alt="example" class="contain narrow"/>

  <h2>object-fit: cover</h2>
  <img  width="60" height="60" src="https://www.onlinewebfonts.com/style/user.png" alt="example" class="cover"/>

  <img  width="60" height="60" src="https://pic.onlinewebfonts.com/svg/thumbnails_60_573798.png" alt="example" class="cover narrow"/>

  <h2>object-fit: none</h2>
  <img  width="60" height="60" src="https://www.onlinewebfonts.com/style/user.png" alt="example" class="none"/>

  <img  width="60" height="60" src="https://pic.onlinewebfonts.com/svg/thumbnails_60_573798.png" alt="example" class="none narrow"/>

  <h2>object-fit: scale-down</h2>
  <img  width="60" height="60" src="https://www.onlinewebfonts.com/style/user.png" alt="example" class="scale-down"/>

  <img  width="60" height="60" src="https://pic.onlinewebfonts.com/svg/thumbnails_60_573798.png" alt="example" class="scale-down narrow"/>

</div>

CSS:

  
  h2 {
  font-family: Courier New, monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 940px;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
}

.narrow {
  width: 100px;
  height: 150px;
  margin-top: 10px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}

PRODUCCIÓN:

Te dejo la página de fiddle para que veas cómo funciona el ejemplo.

Sintaxis

  
  
  /* Keyword values */
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;

/* Global values */
object-fit: inherit;
object-fit: initial;
object-fit: unset;

Valores

fill

El contenido reemplazado se dimensiona para llenar el cuadro de contenido del elemento: el tamaño del objeto concreto del objeto es el ancho y la altura usados del elemento.

contain

El contenido reemplazado se dimensiona para mantener su relación de aspecto mientras se ajusta dentro del cuadro de contenido del elemento: su tamaño de objeto concreto se resuelve como una restricción de contenido contra el ancho y la altura utilizados del elemento.

cover

El contenido reemplazado se dimensiona para mantener su relación de aspecto mientras llena todo el cuadro de contenido del elemento: su tamaño de objeto concreto se resuelve como una restricción de cobertura contra el ancho y la altura usados del elemento.

none

El contenido reemplazado no se redimensiona para que quepa dentro del cuadro de contenido del elemento: el tamaño concreto del objeto del objeto se determina utilizando el algoritmo de tamaño predeterminado sin un tamaño especificado y un tamaño de objeto predeterminado igual al ancho y alto usados del elemento reemplazado.

scale-down

El contenido se dimensiona como si se especificara none o contain, lo que resulte en un tamaño de objeto concreto más pequeño.

Sintaxis formal

  
  fill | contain | cover | none | scale-down

Descripción

La propiedad CSS object-fitespecifica cómo se debe ajustar el contenido de un elemento reemplazado a la caja establecida por su altura y ancho utilizados.