La propiedad object-fit en CSS para ajustar imágenes con CSS

• Categorías
• /
• CSS
• /
• La propiedad object-fit en CSS para ajustar imágenes con CSS

Ver ejemplo Descargar fuente

Muchas veces quieres ajustar una imagen con CSS en un contenedor padre; por ejemplo tienes un contenedor a 1920x1080 y quieres que la imagen ocupe todo ese espacio y sin distorsionarse; y además quieres que la imagen vaya adaptándose según la resolución de la pantalla; pues, esta propiedad llamada object-fit que nos trae CSS es para ti.

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 cómo 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.

Cómo ves es una propiedad bastante curiosa que funciona de manera similar al background-size: cover que ya es una propiedad con bastante tiempo que la implementaron los diferentes navegadores que permite cubrir todo el fondo de un contenedor con una imagen y que esta no se distorsione, misma solución, diferentes escenarios; ya que la propiedad object-fit actúa es sobre las imágenes y no fondos.

Práctica: ¿Cómo ajustar una imagen a su contenedor sólo con CSS?

Esta ya es una propiedad que tiene un buen soporte en los navegadores, desde hace unos pocos años atrás que los principales navegadores como lo son Chome, Firefox y Edge que lo implementan, así que puedes emplear esta propiedad sin miedo para acomodar una imagen dentro de un div fácilmente y que esta sea autoajustable por tal motivo.

Supongamos que tenemos una imagen con el siguiente:

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:

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 para ajustar las imágenes

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; de esta forma podrás apreciar como la imagen se va ajustando, se va ampliando o reduciendo sin distorsionar la misma, en otras palabras; la imagen se autoajusta al contenedor de manera perfecta:

.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; aquí puedes ver cómo ajustar una imagen con los distintos valores que nos permite el object-fit sobre las imágenes; podemos desde llenar el contenedor completamente estirando la imagen o recortando la misma, o podemos indicarle que ocupe hasta donde pueda sin recortar ni escalar la misma; en resumen esas son las descripciones de los ejemplos que veremos a continuación:

Ver ejemplo Descargar fuente