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