46 - Galería de imágenes en CSS: tips y trucos 🎨

Jorge Catalao agosto 17, 2025
HTML


Tema 1: Galería de Imágenes con CSS

Una galería de imágenes con CSS te permite organizar y mostrar imágenes de manera visualmente atractiva. Puedes lograrlo utilizando propiedades como display: grid o flexbox para crear una estructura ordenada.

En el siguiente ejemplo, se utiliza display: grid para crear una cuadrícula que se ajusta a diferentes tamaños de pantalla, lo que mejora la experiencia de usuario: 


/* Estilos para la galería */
.galeria-imagenes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.galeria-imagenes img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

Este código crea una galería de imágenes que se adapta automáticamente al tamaño de la pantalla, mostrando varias imágenes en una cuadrícula. Asegúrate de agregar imágenes con la etiqueta <img> dentro de un contenedor con la clase galeria-imagenes.

Volver al índice 


    <!DOCTYPE html>
    <html lang="es">
    <head>
    <style>
    /* Estilo para la galería */
    div.gallery {
      margin: 5px;
      border: 1px solid #ccc;
      float: left;
      width: 200px;  /* Ancho fijo */
    }
    
    div.gallery:hover {
      border: 1px solid #777;
    }
    
    /* Estilo para las imágenes dentro de la galería */
    div.gallery img {
      width: 100%;
      height: 200px;  /* Altura fija para que todas las imágenes sean iguales */
      object-fit: cover;  /* Asegura que las imágenes no se deformen */
    }
    
    /* Estilo para la descripción debajo de las imágenes */
    div.desc {
      padding: 15px;
      text-align: center;
    }
    </style>
    </head>
    <body>
    
    <!-- Primer card con imagen -->
    <div class="gallery">
      <a target="_blank" href="https://cdn.pixabay.com/photo/2024/11/21/22/06/deer-9214838_1280.jpg">
        <img src="https://cdn.pixabay.com/photo/2024/11/21/22/06/deer-9214838_1280.jpg" alt="Ciervo en el bosque">
      </a>
      <div class="desc">Ciervo en el bosque</div>
    </div>
    
    <!-- Segundo card con imagen -->
    <div class="gallery">
      <a target="_blank" href="https://cdn.pixabay.com/photo/2022/02/07/22/39/nature-7000445_1280.jpg">
        <img src="https://cdn.pixabay.com/photo/2022/02/07/22/39/nature-7000445_1280.jpg" alt="Bosque en invierno">
      </a>
      <div class="desc">Bosque en invierno</div>
    </div>
    
    <!-- Tercer card con imagen -->
    <div class="gallery">
      <a target="_blank" href="https://cdn.pixabay.com/photo/2017/03/04/07/00/european-bee-eater-2115564_1280.jpg">
        <img src="https://cdn.pixabay.com/photo/2017/03/04/07/00/european-bee-eater-2115564_1280.jpg" alt="Abejaruco europeo">
      </a>
      <div class="desc">Abejaruco europeo</div>
    </div>
    
    <!-- Cuarto card con imagen -->
    <div class="gallery">
      <a target="_blank" href="https://cdn.pixabay.com/photo/2020/04/06/19/47/easter-eggs-5011031_1280.jpg">
        <img src="https://cdn.pixabay.com/photo/2020/04/06/19/47/easter-eggs-5011031_1280.jpg" alt="Huevos de pascua">
      </a>
      <div class="desc">Huevos de pascua</div>
    </div>
    
    </body>
    </html>


Tema 2: Galería de Imágenes Responsiva con CSS

Una galería de imágenes responsiva ajusta el diseño de las imágenes según el tamaño de la pantalla del usuario. Para lograrlo, podemos usar propiedades como flexbox o grid, y hacer que las imágenes se ajusten a su contenedor sin perder calidad.

En el siguiente ejemplo, se utiliza flexbox con la propiedad flex-wrap para que las imágenes se distribuyan de manera responsiva en el contenedor y se ajusten de manera eficiente: 


/* Estilos para la galería responsiva */
.galeria-imagenes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.galeria-imagenes img {
    width: 100%;
    max-width: 300px; /* Limitar el tamaño máximo de las imágenes */
    height: auto;
    border-radius: 8px;
    margin: 8px;
}

Este código crea una galería donde las imágenes se alinean en filas y columnas, adaptándose al tamaño del contenedor. La propiedad max-width asegura que las imágenes no superen cierto tamaño, lo que facilita la visualización en pantallas más pequeñas.

Las imágenes en esta galería se reorganizarán automáticamente a medida que cambia el tamaño de la ventana, proporcionando una experiencia visual óptima en dispositivos móviles, tabletas y escritorios.

Volver al índice 


    <!DOCTYPE html>
    <html lang="es">
    <head>
    <style>
    /* Estilo para la galería */
    .galeria-imagenes {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .galeria-imagenes .gallery {
        margin: 5px;
        border: 1px solid #ccc;
        width: 200px;  /* Ancho fijo */
    }

    .galeria-imagenes .gallery:hover {
        border: 1px solid #777;
    }

    /* Estilo para las imágenes dentro de la galería */
    .galeria-imagenes .gallery img {
        width: 100%;
        height: 200px;  /* Altura fija para que todas las imágenes sean iguales */
        object-fit: cover;  /* Asegura que las imágenes no se deformen */
    }

    /* Estilo para la descripción debajo de las imágenes */
    .galeria-imagenes .desc {
        padding: 15px;
        text-align: center;
    }
    </style>
    </head>
    <body>

    <div class="galeria-imagenes">
        <!-- Primer card con imagen -->
        <div class="gallery">
            <a target="_blank" href="https://cdn.pixabay.com/photo/2024/11/21/22/06/deer-9214838_1280.jpg">
                <img src="https://cdn.pixabay.com/photo/2024/11/21/22/06/deer-9214838_1280.jpg" alt="Ciervo en el bosque">
            </a>
            <div class="desc">Ciervo en el bosque</div>
        </div>

        <!-- Segundo card con imagen -->
        <div class="gallery">
            <a target="_blank" href="https://cdn.pixabay.com/photo/2022/02/07/22/39/nature-7000445_1280.jpg">
                <img src="https://cdn.pixabay.com/photo/2022/02/07/22/39/nature-7000445_1280.jpg" alt="Bosque en invierno">
            </a>
            <div class="desc">Bosque en invierno</div>
        </div>

        <!-- Tercer card con imagen -->
        <div class="gallery">
            <a target="_blank" href="https://cdn.pixabay.com/photo/2017/03/04/07/00/european-bee-eater-2115564_1280.jpg">
                <img src="https://cdn.pixabay.com/photo/2017/03/04/07/00/european-bee-eater-2115564_1280.jpg" alt="Abejaruco europeo">
            </a>
            <div class="desc">Abejaruco europeo</div>
        </div>

        <!-- Cuarto card con imagen -->
        <div class="gallery">
            <a target="_blank" href="https://cdn.pixabay.com/photo/2020/04/06/19/47/easter-eggs-5011031_1280.jpg">
                <img src="https://cdn.pixabay.com/photo/2020/04/06/19/47/easter-eggs-5011031_1280.jpg" alt="Huevos de pascua">
            </a>
            <div class="desc">Huevos de pascua</div>
        </div>
    </div>

    </body>
    </html>




Tags:
Jorge Catalao

Posted by: Jorge Catalao

Bienvenido a mi blog de cocina, un espacio donde comparto recetas sencillas que celebran tanto los sabores de hoy como los de ayer. Aquí encontrarás platos fáciles de preparar, con ingredientes accesibles y explicaciones paso a paso, pensadas para quienes disfrutan cocinar sin complicarse. Me inspiro en la cocina tradicional, esos sabores que nos conectan con la infancia y la memoria, pero también en recetas modernas, rápidas y prácticas para el ritmo actual. Desde guisos caseros hasta ideas frescas para todos los días, este blog es para quienes aman el sabor auténtico, sin importar el nivel de experiencia en la cocina. ¡Cocinar puede ser simple, delicioso y hasta divertido! Gracias por estar acá y compartir conmigo esta pasión por la buena comida.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias