CSS: Objetos

En CSS existen algunas propiedades que permiten modificar el dimensionado y la posición del contenido de algunos objetos de contenido multimedia, como pueden ser las imágenes (<img>), los vídeos (<video>), los documentos (<object>) o cualquier otro objeto de representación externa. Además, es posible controlar la relación de aspecto de un objeto.

Propiedades descritas en este artículo:

La propiedad ‘object-fit’

Con la propiedad object-fit es posible indicar cómo el contenido debe ajustarse dentro de la caja de un elemento HTML. Sus valores están definidos por una serie de palabras clave descritas a continuación. Su valor por defecto es fill.

Valores de la propiedad object-fit:

En los siguientes ejemplos se fuerza una relación de aspecto cuadrada de 150×150 píxeles (mediante aspect-ratio) para el contenedor, mientras que la imagen utilizada tiene un tamaño original de 300×200 píxeles.

Usando el valor ‘contain’

Usando el valor contain, el contenido se ajusta hasta caber dentro de la caja sin deformarse, por lo que se dimensiona hasta que se vea de forma completa. Si la relación de aspecto del contenido no coincide con la del contenedor (caja), se visualizará espacios vacíos en dos de los cuatro lados.

Código CSS:

.contain {
  object-fit: contain;
}

Resultado:

Usando el valor ‘cover’

Con el valor cover, el contenido va a cubrir la totalidad de la caja, también sin deformarse. Por tanto, en caso de que la relación de aspecto del contenido no coincida con la del contenedor (caja), quedarán partes invisibles.

Código CSS:

.cover {
  object-fit: cover;
}

Resultado:

Usando el valor ‘fill’

El valor fill también pretende llenar la totalidad del contenedor. Sin embargo, en esta ocasión, si la relación de aspecto del contenido no coincide con la del contenedor (caja), el contenido se deforma hasta no dejar espacios vacíos a los lados. El contenido puede verse completo pero deformado.

Código CSS:

.fill {
  object-fit: fill;
}

Resultado:

Usando el valor ‘none’

Con el valor none el contenido no cambia de tamaño y no se deforma.

Código CSS:

.none {
  object-fit: none;
}

Resultado:

Usando el valor ‘scale-down’

Finalmente, el valor scale-down es como si se hubiera especificado los valores none o contain, con la diferencia de que únicamente se dimensiona si es para reducirse, pero nunca para ampliarse; por tanto, tampoco se deforma.

Código CSS:

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

Resultado:

La propiedad ‘object-position’

La propiedad object-position es el complemento perfecto para la propiedad object-fit, ya que nos permite indicar la posición del contenido en su caja contenedora. Es útil sobre todo cuando la imagen está recortada; tiene un funcionamiento parecido a la propiedad background-position.

Su valor por defecto es 50% 50%, lo que indica que el contenido quedará centrado horizontal y verticalmente. Se puede indicar una longitud en píxeles o en porcentaje. Si solo se indica un valor, se aplicará un desplazamiento horizontal. Si son dos valores, se aplicará primero en horizontal y luego en vertical.

Por ejemplo, el valor 10px indica que el contenido debe desplazarse 10 píxeles des de la izquierda hacia la derecha. En cambio, el valor 10px 20px indica además que el contenido debe desplazarse 10 píxeles hacia abajo.

Código CSS:

.pos1 {
  object-fit: auto;
  object-position: 10px 20px;
}

Resultado:

Se permite especificar la zona a partir de la cual se aplica el posicionamiento. Para ello se usa las palabras clave top, bottom, left y right. Por ejemplo, si se quiere indicar que la imagen se desplace 10 píxeles hacia la izquierda y 20 píxeles hacia arriba se puede usar el valor right 10px bottom 20px.

Código CSS:

.pos2 {
  object-fit: auto;
  object-position: right 10px bottom 20px;
}

Resultado:

La propiedad ‘aspect-ratio’

Con la propiedad CSS aspect-ratio se puede definir una relación de aspecto entre la altura y la anchura. Esto significa que si el elemento contenedor (padre) o el viewport cambian de tamaño, el navegador web ajustará las dimensiones del elemento manteniendo la relación de aspecto que se haya indicado.

La propiedad aspect-ratio puede jugar un papel importante al lado de las propiedades object-fit y object-position, ya que de esta manera se puede definir una relación de aspecto del elemento contenedor y decidir cómo el contenido se debe dimensionar y posicionar en su interior.

Para que la relación de aspecto de un elemento tenga efecto es importante que una de las dos dimensiones (width o height) tenga el valor auto. Por tanto, si las propiedades width o height tienen un valor numérico, se ignorará la relación de aspecto que hayamos especificado con la propiedad aspect-ratio.

Valores de la propiedad aspect-ratio:

Indicando dos valores, el primero es la anchura y el segundo es la altura. Así, si queremos indicar una proporción con el doble de anchura que de altura, será tan fácil como indicar 2/1. Otras proporciones habituales son 16/9 o 4/3. También es válido indicar un único valor, que es el resultado de la fracción. Por tanto, indicar 2/1 equivale a 2, e indicar 1/2 es lo mismo que indicar 0.5.

Esta propiedad puede ser muy útil cuando tenemos varios objetos de contenido que pueden cambiar de tamaño y queremos que se vean iguales, como podría ser en una galería de imágenes. En vez de verse unos más altos o más anchos que los otros, se verán todos con la misma proporción de anchura/altura.