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

Triangulo 3D animado con CSS

Triangulo 3D animado con CSS

Css3 Spinners

Css3 Spinners

Algunos artículos que te pueden interesar

Gradientes SVG en HTML

Gradientes SVG en HTML

En esta entrada veremos cómo definir y aplicar gradientes a cualquier SVG creado a partir de HTML; hay dos tipos de gradientes SVG que podemos emplear en nuestros diseños: lineal y radial.

Andrés Cruz 18-05-2015

¿Cómo crear un carrusel con CSS?

¿Cómo crear un carrusel con CSS?

En esta entrada veremos cómo crear un carrusel con solo CSS, veremos un par de variación más para ejemplificar la versatilidad del código presentado empleando las Animaciones y JavaScript.

Andrés Cruz 21-09-2015

Creando un fondo vivo con CSS

Creando un fondo vivo con CSS

En esta entrada veremos cómo crear un fondo vivo con CSS para ser aplicados en una página web.

Andrés Cruz 03-08-2015