DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
02-02-2015

La propiedad object-fit en CSS específica como el contenido de algún elemento (como una imagen) debe ser mostrado cuando la anchura y altura de este elemento varía con respecto a su contenedor (cuadro) creado por el mismo; la utilidad de esta propiedad radica en el hecho de poder elegir como deseamos que se ajuste el contenido a un espacio asignado (creado por el mismo) que varía en su relación de aspecto (aspect ratio) de la imagen.

Relación de aspecto (aspect ratio): de una imagen o algún otro elemento HTML no es más que la proporción entre su ancho y altura; podemos calcular el mismo dividiendo el ancho por la altura del elemento.
Con cuadro nos referimos al espacio asignado por el contenido que se desea mostrar; por ejemplo si deseamos mostrar una imagen en un espacio de 400x100 pixeles, el cuadro que contiene a la imagen será el comprendido por este espacio asignado de 400x100 pixeles.

Caso práctico para entender la utilidad de la propiedad object-fit

Supongamos que tenemos una imagen con el siguiente:

imagen tigre ejemplo

La imagen anterior tiene un radio aspecto de 16/9 ya que cuenta con unas dimensiones X y Y de:

1200÷16 = 75
675÷9 = 75

Ambos valores son iguales lo que indica que la relación de aspecto (aspect ratio) es de 16/9.

¿Qué debemos hacer para ajustar el contenido a mostrar de la imagen si queremos presentar la misma en un rectángulo de unos 400x100 píxeles? y en donde lógicamente la relación de aspecto es diferente a la de la imagen (4/1).

Para contestar la pregunta anterior, primero debemos cuales son los valores posibles para esta propiedad y el significado de cada uno:

Valores de la propiedad object-fit

fill En este primer caso el contenido es dimensionado para llenar (fill) por completo las dimensiones creado por su cuadro y por ende se pierde la relación de aspecto y no hay espacios en blancos.
cotain En este segundo caso el contenido contenido es dimensionado para ajustarse de la mejor manera; pero a diferencia del valor anterior, se mantiene la relación de aspecto y por ende si las relaciones de aspecto varían entre el contenido y su cuadro, en el cuadro abran espacios vacíos.
cover El valor cover tiene el mismo comportamiento que al usar la propiedad background-size con el valor cover; el contenido se dimensionado para llenar por completo su cuadro y se mantiene la relación de aspecto, pero se realizan recortes en los bordes del contenido para ajustar el mismo.
none El contenido no es redimensionado.
scale-down El contenido es redimensionado como si se especificara none o cotain.

Para entender un poco mejor estos valores asignables a la propiedad object-fit, veamos una serie de ejemplos con cada uno de estos valores; usaremos la siguiente imagen:

imagen tigre ejemplo

Que tiene unas dimensiones de 1200px por 675px y por lo tanto un radio aspecto de 16/9:

Al colocar esta imagen en un contenedor de 400x100 pixeles con un radio aspecto distinto al de la imagen y aplicando cada una de los valores explicados anteriormente:

Definición del HTML

Creamos tantos tag <img> almacenados en una estructura como valores comprenda la propiedad object-fit.

		<div class="example1">
			<div>
				<img class="uno" src="tigre.png">
				<span>object-fit: fill;</span>
			</div>
			<div>
				<img class="dos" src="tigre.png">
				<span>object-fit: contain;</span>
			</div>
			<div>
				<img class="tres" src="tigre.png">
				<span>object-fit: cover;</span>
			</div>
			<div>
				<img class="cuatro" src="tigre.png">
				<span>object-fit: none;</span>
			</div>
			<div>
				<img class="cinco" src="tigre.png">
				<span>object-fit: scale-down;</span>
			</div>
		</div>

Definición del CSS

Principalmente el CSS definido se basa en la creación de un cuadro de 400px por 100px con un borde para facilitar la diferencia entre los distintos valores provistos por la propiedad object-fit establecidos con distintos valores para las imágenes.

.example1 img {
	width: 400px;
	height: 100px;
	border: 2px solid #fff;
}
.example1 img.uno {
	object-fit: fill;
}

.example1 img.dos {
	object-fit: contain;
}

.example1 img.tres{
	object-fit: cover;
}

.example1 img.cuatro{
	object-fit: none;
}

.example1 img.cinco{
	object-fit: scale-down;
}

Obtenemos los siguientes resultados:

object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Ley del cuadrado inverso con CSS

Ley del cuadrado inverso con CSS

Menú Radial con solo CSS

Menú Radial con solo CSS

Un waffle con CSS

Un waffle con CSS

Algunos artículos que te pueden interesar

Comenzando con Adobe PhoneGap en Windows y Android

Comenzando con Adobe PhoneGap en Windows y Android

Se explica como instalar Adobe PhoneGap en Windows y Android además de crear un proyecto y configurarlo en la aplicación móvil.

Andrés Cruz 27-01-2017

La pseudo-class :checked en CSS

La pseudo-class :checked en CSS

El selector de la pseudo-class :checked representa (permite seleccionar) a cualquier elemento HTML radio, checkbox u option.

Andrés Cruz 26-01-2015

Las propiedades flex-grow, flex-shrink y flex-basis

Las propiedades flex-grow, flex-shrink y flex-basis

Los flex permiten adaptarse fácilmente al espacio disponible en cualquier dispositivo; se explicará el uso de las propiedades flex-grow, flex-shrink para manejar el espacio sobrante y faltante y flex-basis para definir el tamaño base.

Andrés Cruz 20-03-2016