0

/* las imágenes han de ser cuadradas y las 9 fotos han de verse en una parrilla de 3*3 */

img {
    width: 175px;
    height: 175px;
    object-fit: cover;
}


/* .container_fotos es a su vez parent de los <div> que contienen las imágenes y child de .contianer que tiene una columna y tres filas con un width 100% del container */

.container_fotos {
    background-color: white;
    border-radius: 25px;
    
    width: 525px;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 0px;

    margin: 2em 0;

}
<div class="container_fotos">
            <div class="item"><img src="/media/1.jpg" alt=""></div>
            <div class="item"><img src="/media/2.jpg" alt=""></div>
            <div class="item"><img src="/media/3.jpg" alt=""></div>
            <div class="item"><img src="/media/4.jpg" alt=""></div>
            <div class="item"><img src="/media/5.jpg" alt=""></div>
            <div class="item"><img src="/media/6.jpg" alt=""></div>
            <div class="item"><img src="/media/7.jpg" alt=""></div>
            <div class="item"><img src="/media/8.jpg" alt=""></div>
            <div class="item"><img src="/media/9.jpg" alt=""></div>
        </div>

1 respuesta 1

1

Revise tu código y para conseguir que se elimine el espacio en blanco que esta debajo de la imagen, solo debes agregar el siguiente código a tu archivo css. img { vertical-align: middle;}

introducir la descripción de la imagen aquí

2
  • Funciona correctamente Andres! Muchas gracias! Si tienes idea de qué puede provocar el comportamiento indicado (ese padding-bottom de 4px), estaría aún más agradecido! Commented el 17 ago. 2021 a las 10:15
  • 1
    De forma predeterminadamente las imágenes se alinean hacia el borde superior izquierdo, esto puede causar que en algunos casos las imágenes no cubran todo el espacio disponible del contenedor. Commented el 17 ago. 2021 a las 14:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.