Galería de imágenes CSS
Los desplegables anidan menús bajo enlaces. Una galería de imágenes es otro componente: una cuadrícula calmada de miniaturas que la gente puede recorrer. Iguala el tamaño de los thumbs, deja que la fila envuelva, recorta con object-fit y deja las rejillas responsivas profundas a los módulos Flexbox y Grid siguientes.
Caja de herramientas de la galería
📊 Galería de imágenes de un vistazo
| Pieza | Trabajo diario |
|---|---|
| Lista de galería | Contenedor que coloca thumbs en fila envolvente o rejilla |
| Tamaño del thumb | Ancho/alto compartido para que el conjunto se vea uniforme |
object-fit: cover |
Llena la caja del thumb sin estirar de forma rara |
| Gap / margin | Aire entre imágenes |
| Señal de hover | Feedback suave sin saltar el layout |
| Pie de foto | Opcional con figure/figcaption para dar sentido |
Usa elementos <img> reales con alt útil. Los sprites solo decorativos van en otro sitio — las galerías suelen ser contenido.
Galería flex con wrap
Un contenedor flex con wrap convierte una lista de thumbs en una fila responsiva que baja a la siguiente línea. Gap mantiene el espaciado honesto.
.gallery {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
list-style: none;
margin: 0;
padding: 0;
}
Caja de thumb compartida + cover
Dale a cada imagen la misma caja y luego recorta con cover para que verticales y horizontales compartan un ritmo.
.gallery img {
width: 160px;
height: 120px;
object-fit: cover;
display: block;
border-radius: 0.35rem;
}
Figures y pies de foto
Cuando importa la etiqueta, envuelve la imagen en figure y añade figcaption. Mantén el texto del pie corto bajo el thumb.
.gallery figure {
margin: 0;
width: 160px;
}
.gallery figcaption {
margin-top: 0.35rem;
font-size: 0.85rem;
color: #555;
}
Feedback de hover suave
Atenúa o aclara un poco al pasar el cursor. Evita escalas enormes que empujen a los vecinos salvo que planifiques el apilado con cuidado.
.gallery a:hover img {
opacity: 0.88;
outline: 2px solid #0b5fff;
outline-offset: 2px;
}
Un hábito calmado de galería
Cajas de thumb iguales, wrap + gap, object-fit: cover, alt con sentido. Prefiere las lecciones Flex/Grid siguientes para masonry responsivo avanzado — no lo confundas con menús desplegables.
.gallery { /* wrapping track */ }
.gallery__item { /* each thumb cell */ }
.gallery__img { /* the img */ }
.gallery__cap { /* optional caption */ }
Pruébalo tú
- Construye una lista
.galleryflex wrap de imágenes enlazadas. - Define ancho/alto compartidos y
object-fit: cover. - Añade
figure/figcaptionen un ítem. - Estiliza un hover suave con opacidad o outline.
- Escribe una frase: ¿qué enseñará Grid mejor que este boceto con wrap?
Errores frecuentes
- Mezclar alturas al azar sin caja compartida ni object-fit
- Gap cero para que los thumbs se peguen
- Tratar las galerías como menús desplegables anidados
- Posicionar absolute cada thumb en un montón frágil
altvacío en fotos con significado
Resumen
- Las galerías son conjuntos envolventes de miniaturas iguales
- Tamaño compartido +
object-fit: covermantiene el ritmo ordenado - Flex wrap + gap es un layout de inicio calmado
- Pies de foto y señales hover siguen opcionales y ligeros
- Los módulos Flexbox/Grid profundizan las galerías responsivas después
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior