En este ejercicio de CSS de galería responsive combinarás una cuadrícula flexible con miniaturas que mantienen la proporción de las fotos.
Enunciado
Prepara tres fotografías de tamaños distintos. Muéstralas en cajas de proporción 4:3 con títulos breves y ajusta la cuadrícula al ancho disponible.
Solución comentada
Prueba el fragmento dentro del cuerpo de un documento HTML. Incluye la etiqueta viewport si vas a comprobar el resultado en móvil.
<section class="galeria" aria-label="Paisajes de la costa">
<figure><img src="puerto.webp" alt="Barcas junto al muelle"><figcaption>Puerto</figcaption></figure>
<figure><img src="sendero.webp" alt="Camino entre dunas"><figcaption>Sendero</figcaption></figure>
<figure><img src="faro.webp" alt="Faro blanco sobre el acantilado"><figcaption>Faro</figcaption></figure>
</section>
<style>
.galeria {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
gap: 1.25rem;
}
.galeria figure { margin: 0; }
.galeria img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: .75rem;
}
.galeria figcaption { padding-block: .5rem; }
</style>Cover llena la caja conservando la proporción del contenido, por lo que puede recortar bordes. Usa nombres, textos alternativos y, si las conoces, dimensiones acordes con tus archivos reales. Un recorte que oculta el sujeto requiere ajustar object-position o elegir otra foto.
Cómo comprobar tu solución
- Incluye una foto vertical y otra apaisada.
- Reduce el ancho hasta que quede una sola columna.
- Comprueba que ninguna imagen se deforma y que el sujeto sigue visible.
Reto adicional
Cambia una miniatura a contain. Compara el recorte y el espacio sobrante. Decide qué opción conviene si la imagen representa un producto que debe verse completo.
Repasa los conceptos en el tutorial de MasterCodePro.
