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

Efectos hover con CSS

Efectos hover con CSS

MixitUp 3: animaciones y manipulación del DOM

MixitUp 3: animaciones y manipulación del DOM

Hover over the cards

Hover over the cards

Algunos artículos que te pueden interesar

Cómo capturar videos desde la cámara con PhoneGap

Cómo capturar videos desde la cámara con PhoneGap

Andrés Cruz 08-05-2017

Animando cosas con CSS: creando loaders

Animando cosas con CSS: creando loaders

Los loaders son un recurso de los más vistosos y necesarios en cualquier aplicación al momento de realizar una tarea que requiera tiempo; en esta entrada veremos cómo crear un par de loaders.

Andrés Cruz 20-10-2015

Recortes de imágenes con HTML5 y jQuery

Recortes de imágenes con HTML5 y jQuery

En este artículo veremos cómo recortar imágenes y guardarlas en nuestra computadora o dispositivo móvil con HTML5 y jQuery.

Andrés Cruz 07-05-2014