4

introducir la descripción de la imagen aquíAlguien podría ayudarme a hacer que las imágenes ocupen toda la altura de su respectiva box? Como podrán observar, abajo se queda un pequeño espacio con el color del background, que me gustaría que se ocupara con la imagen.

.projects-box {
  background: RoyalBlue;
  width: 80%;
  display: flex;
  margin: 4% auto;
  flex-wrap: wrap;
  align-items: center;
}

.individual-box {
  flex-basis: 25%;
  text-align: center;
  background-size: cover;
}

.individual-box img {
  width: 100%;
  cursor: pointer;
}
<div class="projects-box">
        <div class="individual-box">
            <img src="img/img.jpg">
        </div>
        <div class="individual-box">
            <p>Proyecto</p>
        </div>
        <div class="individual-box">
            <img src="img/img.jpg">
        </div>
        <div class="individual-box">
            <p>Proyecto</p>
        </div>      
    </div>
    

1 respuesta 1

4

Con añadir la propiedad display: flex a .individual-box lo conseguirías. Pero esto ocasionaría que el texto dejase de estar alineado en el centro.

Para que siga con esa alineación te bastaría añadirle también justify-content: center.

.projects-box {
  background: RoyalBlue;
  width: 80%;
  display: flex;
  margin: 4% auto;
  flex-wrap: wrap;
  align-items: center;
}

.individual-box {
  flex-basis: 25%;
  text-align: center;
  background-size: cover;
  display: flex;
  justify-content: center;
}

.individual-box img {
  width: 100%;
  cursor: pointer;
}
<div class="projects-box">
        <div class="individual-box">
            <img src="https://comunidad.retorn.com/wp-content/uploads/cache/2018/09/gatitos/534533867.jpg">
        </div>
        <div class="individual-box">
            <p>Proyecto</p>
        </div>
        <div class="individual-box">
            <img src="https://comunidad.retorn.com/wp-content/uploads/cache/2018/09/gatitos/534533867.jpg">
        </div>
        <div class="individual-box">
            <p>Proyecto</p>
        </div>      
    </div>

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.