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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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