Merida Design Blog

Publicado el | Artículos / , ,

Crear miniaturas responsivas con CSS

Las thumbnails (miniaturas en español) se usan hoy día en prácticamente todos los sitios, ya sea en un portafolio de proyectos, galerías o listados de publicaciones y artículos.

Lo ideal es que esas miniaturas fueran creadas de manera independiente, ya sea en un editor como Photoshop o a través de un CMS como wordpress que las genera de manera automática, sin embargo, hay ocasiones en las que no contamos con ninguna de estas opciones, o simplemente queremos hacer miniaturas con diferentes proporciones y generarlas manualmente se vuelve tedioso.

Afortunadamente esto se puede lograr con unas pocas líneas de código CSS, y para ello tenemos varias formas de lograrlo, para fines de éste artículo yo mencionaré 3:

  • Usando la propiedad background-image (pobre SEO).
  • Usando un div para enmascarar la imagen. (buen SEO)
  • Usando la propiedad object-fit de CSS3 (buen SEO, pero ni IE ni Edge lo soportan).

See the Pen CSS Thumbnails by Iván Villamil (@ivillamil) on CodePen.

Usando background-image

	<ul>
		<li>
			<div class="image-wrapper" 
				style="background-image: url(url_to_image)"></div>
			...
		</li>
		...
	</ul>
	li {...}
	.image-wrapper {
		background-position: center;
		background-size: cover;
		padding-bottom: 90%;
		position: relative;
		width: 100%;
	}

Lo primero que debes hacer, es incluir la ruta de la imagen directamente al elemento que servirá como thumbnail a través de la propiedad de estilos background-image y en el css definir el tamaño y posición del fondo, en este caso el tamaño es cover el cual hace que la imagen ocupe todo el espacio disponible, y la posición center ya que el contenido mas importante en las fotos siempre suele estar cercano al centro.

El resto de las propiedades de la clase .image-wrapper son las que permiten que el elemento sea responsivo, ajustando su tamaño respetando la proporción conforme la pantalla se hace mas chica o grande.

NOTA: La ruta de la imagen se coloca directamente al elemento y no en el css ya que por lo general estas miniaturas formarán parte de una colección que se cargarán dinámicamente.

Ventajas

Este método es muy sencillo de implementar y además muy versátil, ya que puedes variar la posición de la imagen muy fácilmente con las opciones de la propiedad background-position y es compatible con todos los navegadores, modernos y viejitos.

La mayor ventaja de éste método es que no importa si la imagen es horizontal o vertical, el contenido siempre se acomodará al elemento.

Desventajas

Al no estar presente el elemento img los motores de búsqueda no son capaces de indexar la imagen, lo cual representa una pequeña desventaja cuando queremos optimizar el SEO.

 

Usando una máscara

	...
	<div class="image-wrapper">
		<img src="url_to_image">
	</div>
        ...
	.image-wrapper {
		overflow: hidden;
		padding-bottom: 90%;
		position: relative;
		width: 100%;
	}
	.image-wrapper img {
		max-height: 100%;
		position: absolute;
		top: 50%; left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

Para este método usamos las mismas propiedades en la clase .image-wrapper excepto las de background..., el elemento con ésta clase es el que nos servirá como máscara, para lo cual debes aplicar la propiedad overflow: hidden; como vemos en la línea 2 de los estilos.

A la imagen le definimos un alto máximo de 100% para que se adapte al alto de la máscara y el ancho se ajusta automáticamente de manera proporcional rebasando el ancho de la máscara pero permaneciendo oculta gracias a la propiedad hidden.

Por último centramos la imagen dentro de la máscara usando posiciones absolutas y la propiedad transform como se muestra en las líneas 9 a 12.

Ventajas

La principal ventaja es que al contar con el elemento img en el contenido html, las imágenes podrán ser indexadas por los motores de búsqueda, mejorando así el SEO de la página.

Este método es compatible con todos los navegadores.

Desventajas

Si la imagen es vertical en lugar de horizontal, se debe cambiar la propiedad de la línea 7 por max-width, y ya que el contenido por lo general se carga dinámicamente desde una base de datos, es difícil determinar si la imagen es vertical u horizontal para así aplicarle el estilo correspondiente.

 

Usando object-fit

	...
	<div class="image-wrapper">
		<img src="url_to_image">
	</div>
	.image-cover {
		overflow: hidden;
		padding-bottom: 90%;
		position: relative;
		width: 100%;
	}
	.image-cover img {
		height: 100%;
	    object-fit: cover;
	    position: absolute;
	    width: 100%;
	}

Para este método hacemos que la imagen tenga el mismo ancho y alto que su contenedor y le asignamos la propiedad object-fit: cover que funciona exactamente igual que la propiedad background-size: cover haciendo que el contenido de la imagen ocupe todo el espacio disponible manteniendo su proporción, el contenido también es centrado por default.

Ventajas

Es sencillo de implementar y al igual que con el método de la máscara, es óptimo para el SEO.

No importa si la imagen es vertical u horizontal, el contenido siempre ocupará el espacio disponible manteniendo la proporción.

Desventajas

Su única y mayor desventaja es que la propiedad object-fit no es soportada por Internet Explorer en ninguna de sus versiones y tampoco en su nuevo navegador Edge.

 

Conclusión

Personalmente uso más el segundo y el tercer método, aunque el tercero solamente en proyectos en los que estoy seguro que mi aplicación correrá en un navegador basado en webkit como es el caso de las aplicaciones híbridas con cordova (móviles) y electron (escritorio), para los sitios web la segunda sería definitivamente mi recomendación.

No olvides compartir tus dudas o comentarios, me encantaría conocer tu opinión.



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: