Objetos en CSS

Propiedades como object-fit u object-position


En CSS, se denominan objetos a imágenes a través de la etiqueta <img>, elementos multimedia a través de <video> u otros elementos como <textarea> o <input>, por ejemplo. Dichos elementos tienen su propia forma de mostrarse en pantalla ya que tienen características ajenas a CSS.

Por dicha razón, muchas veces estos objetos tienen un tamaño inicial que no encaja con el uso que queremos darle, no se adapta a las cajas o contenedores que usamos o no funciona como tenemos previsto que lo haga.

Propiedades para objetos

Sin embargo, existen algunas propiedades en CSS que nos permiten modificar ciertos aspectos de muchos de estos elementos, pudiendo darle estilo y adaptarlos.

Aquí puedes ver una tabla resumen de las propiedades que vamos a analizar:

PropiedadValoresDescripción
object-fitfill | contain | cover | none | scale-downModo en que se adapta el elemento.
object-position Posición (x,y) del elemento.
object-view-boxRegión del elemento se visualizará.

Veamos detalladamente, una por una.

La propiedad object-fit

La propiedad object-fit nos va a permitir cambiar el modo en el que se rellena o adapta una imagen <img> (o cualquier otro objeto de representación externa a CSS) en su contenedor padre o en si mismo. Los valores que puede tomar dicha propiedad son los siguientes:

ValorDescripción
fill«Rellena» la imagen ocupando todo el espacio. Habitualmente, se produce un estiramiento de la imagen.
coverMantiene proporción, cubriendo lo máximo posible, sin que queden huecos sin cubrir. Suele ocultar partes.
containMantiene proporción, conteniendo el máximo posible de la imagen. Suelen sobrar partes.
noneMantiene el aspecto natural.
scale-downSimilar a contain, pero si la imagen es más pequeña, no la amplía.

Imaginemos que una imagen, que tiene su propio tamaño, es notablemente superior que los elementos contenedores (o el tamaño) que lo va a contener. Por defecto, la imagen tiene su propio tamaño y se desbordará, pero nos podría interesar cambiar su tamaño de alto y/o ancho para que se adapte.

Para ello, utilizaremos los diferentes valores de la propiedad object-fit:

La propiedad Object-fit CSS

Así pues, podemos plantear el siguiente código de ejemplo, donde se puede utilizar la propiedad object-fit con sus diferentes valores y comprobar como se comporta:

.parent {
  display: flex;
}
.item {
  margin: 10px;
  width: 150px;
  height: 150px;
  background: lightgrey;
}

.item-1 { object-fit: fill; }
.item-2 { object-fit: cover; }
.item-3 { object-fit: contain; }
.item-4 { object-fit: scale-down; }
.item-5 { object-fit: none; }
<div class="parent">
  <img class="item item-1" src="cat.jpg" alt="Cat">
  <img class="item item-2" src="cat.jpg" alt="Cat">
  <img class="item item-3" src="cat.jpg" alt="Cat">
  <img class="item item-4" src="cat.jpg" alt="Cat">
  <img class="item item-5" src="cat.jpg" alt="Cat">
</div>

La propiedad object-position

Además, tenemos la propiedad object-position que nos sirve para utilizar junto a la propiedad object-fit y cambiar la posición donde aparece la imagen, especialmente cuando está recortada y sólo aparece un fragmento o parte de la imagen. La propiedad funciona de forma muy parecida a como lo hace la propiedad background-position:

ValorDescripción
50% 50%Por defecto, la imagen está centrada tanto en X como en Y.
Se puede indicar un porcentaje para colocarlo en el eje correspondiente.

También se pueden indicar palabras clave como top, left, right, bottom o center para indicar en que zona quieres centrar la imagen, incluso, añadiendo un porcentaje tras ellos para ajustar más concretamente:

.container {
  --size: 256px;

  display: flex;
  gap: 1rem;
}

img {
  width: var(--size);
  height: var(--size);
  object-fit: none;
}

.normal { object-position: 50% 50%; }
.positioned { object-position: left 50% top 0%; }
<div class="container">
  <img class="normal" src="bad-manzdev.png" alt="Bad ManzDev">
  <img class="positioned" src="bad-manzdev.png" alt="Bad ManzDev">
</div>

La propiedad object-view-box

La propiedad object-view-box nos permite indicar al navegador la región visible de un elemento a visualizar, es decir, su viewbox (caja de visualización). Con esta herramienta a nuestra disposición, podremos mostrar sólo una parte de una imagen o video, o incluso hacer zoom con animaciones si activamos las transiciones.

Para ello, utilizaremos por ejemplo, la función inset() para determinar la región que recortaremos. Esta función trabaja exactamente de la misma forma que explicamos en el apartado recortes con clip-path.

.container img {
  width: 256px;
  height: 256px;
  transition: all 0.5s;
  object-view-box: inset(0% 0% 0% 0%);
}

/* Al mover el ratón por encima... */
.container img:hover {
  object-view-box: inset(20% 20% 20% 20%);
}
<div class="container">
  <img src="bad-manzdev.png" alt="Bad ManzDev">
</div>

Estamos utilizando 4 parámetros en la función inset(). Si son el mismo, se puede resumir en un sólo parámetro. Para suavizar el cambio estamos usando trasiciones, que las explicamos en el apartado de Transiciones CSS.

En el ejemplo superior, recortamos la imagen un 25% por cada lado, es decir, top right bottom left, en el sentido de las agujas del reloj. Si quieres aprender a utilizarla, incluso con animaciones, echa un vistazo al siguiente video:

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev