Cómo hacer una galería de imágenes responsive

Tiempo estimado de lectura: 5 minutos

 

Crear galería de imágenes responsive

En esta ocasión vamos a aprender a crear una galería de imágenes responsive con la que mostraremos nuestras imágenes de la forma correcta, y como siempre, sin utilizar ningún plugin.

Código CSS que vamos a utilizar para crear nuestra galería de imágenes responsive

Aunque, a primera vista, el código que vamos a utilizar para este ejemplo pueda parecer excesivo, en realidad es el mínimo viable que podemos utilizar, y es muy sencillo de entender.

Lo primero que tenemos que hacer para este ejemplo, es crear la estructura para la galería, con lo que el código que puedes utilizar debería ser algo parecido a este:

div.galeria {
border: 1px solid #ccc;
}
div.galeria:hover {
border: 1px solid #777;
}
div.galeria img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}

¿Dónde colocaremos este código?. Pues al tratarse de código CSS, podremos colocarlo en el personalizador de nuestro WordPress (menú Apariencia, Personalizar, CSS adicional).

¿Qué es lo que hace este código?

Este código tan largo que puede parecer intimidante, en realidad es más sencillo de lo que parece. A grandes rasgos, lo que hace es crear una clase CSS llamada galeria, esta clase formatea una serie de imágenes con su descripción en una tabla, estas imágenes adaptarán su longitud al 100% de la longitud del div. El texto estará centrado y la caja (el div) tendrá un borde de 1 pixel de ancho.

La alineación de los divs será izquierda, y cada div tendrá un 25% de longitud con respecto al contenedor, es decir, la galería mostrará 4 columnas de imágenes.

A continuación, establecemos dos puntos de corte:

  • Cuando el tamaño de la ventana llegue a 700 px o menos, que la galería pasara de tener 4 columnas a tener 2 columnas (para ello, su longitud (width) pasará a ser del 50%.
  • Cuando el tamaño de la ventana llegue a 500 px o menos, que la galería pasara de tener 2 columnas a tener 1 columna (se le establecerá un width del 100%).

Código HTML que vamos a utilizar para crear nuestra galería de imágenes responsive

A continuación, vamos a crear la galería en sí, para ello crearemos 4 divs que contendrán las 4 imágenes con sus textos respectivos. El código puede ser algo parecido a este:

<div class="responsive">
<div class="galeria">
<a target="_blank" href="ruta/imagen1.jpg">
<img src="ruta/imagen1.jpg" alt="Texto alternativo imagen 1" width="600" height="400">
</a>
<div class="desc">Descripción de la imagen 1</div>
</div>
</div>
<div class="responsive">
<div class="galeria">
<a target="_blank" href="ruta/imagen2.jpg">
<img src="ruta/imagen2.jpg" alt="Texto alternativo imagen 2" width="600" height="400">
</a>
<div class="desc">Descripción de la imagen 2</div>
</div>
</div>
<div class="responsive">
<div class="galeria">
<a target="_blank" href="ruta/imagen3.jpg">
<img src="ruta/imagen3.jpg" alt="Texto alternativo imagen 3" width="600" height="400">
</a>
<div class="desc">Descripción de la imagen 3</div>
</div>
</div>
<div class="responsive">
<div class="galeria">
<a target="_blank" href="ruta/imagen4.jpg">
<img src="ruta/imagen4.jpg" alt="Texto alternativo imagen 4" width="600" height="400">
</a>
<div class="desc">Descripción de la imagen 4</div>
</div>
</div>

EL resultado de cómo se vería con los distintos tamaños de pantalla, sería algo parecido a este:

Resultado de cómo crear una galería de imágenes responsive
Resultado de cómo crear una galería de imágenes responsive


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *