0

Tengo un div (llamemoslo X) que ocupa un 85% de la pantalla y necesito que dentro de ese div se puedan agregar otros divs, algunos contienen texto, otros imágenes y otros videos. Cada hijo ocupa un 100% del ancho del padre, pero el alto del padre se distribuye entre los div hijo que tenga (dándoles la misma cantidad de espacio a cada uno, por más que uno solo necesite 10 píxeles). ¿Alguna sugerencia de como llevarlo a cabo?

El código siguiente funciona sin imágenes, pero las imagenes rompen el contenedor flex saliéndose por fuera, ¿alguna idea?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style>
    body {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background-color: black;
    }
    
    #container {
      width: 85%;
      height: 85%;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      display: flex;
      flex-direction: column;
      background-color: blue;
    }
    
    .elem {
      border: 1px solid #BBBB1199;
      flex-basis: 100%;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="image elem">
      <img src="https://www.hd-wallpapersdownload.com/script/bulk-upload/lion-big-wallpapers.jpg" />
    </div>
    <div class="elem">TEXT TEXT TEXT</div>
  </div>
</body>

</html>

1
  • ¿Qué debería ocurrir cuando la imagen (o el contenido del div) ocupe más del alto que le corresponde?
    – Alvaro Montoro
    Commented el 28 abr. 2018 a las 4:32

1 respuesta 1

0

Que todos los div hijos tengan la misma altura, lo tienes ya hecho con flexbox y funciona correctamente. El problema es cuando el contenido ocupa más de la cuenta.

Para esos casos podrías añadirle un overflow: hidden a los div hijos para que las imágenes/video/contenido no rompan el tamaño de su contenedor. Así todos los div con clase elem tendrán la misma altura.

El problema ahora es que cuando una imagen (o un video) es muy grande, se ve cortada. Si quieres que se vea completa, podrías añadirle height: 100% para que se ajuste al tamaño del div que la contiene.

Aquí puedes ver tu código sólo con esos dos cambios. Ahora los div ocupan lo mismo y la imagen del león se ajusta al tamaño de su contenedor:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style>
    body {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background-color: black;
    }
    
    #container {
      width: 85%;
      height: 85%;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      display: flex;
      flex-direction: column;
      background-color: blue;
    }
    
    .elem {
      border: 1px solid #BBBB1199;
      flex-basis: 100%;
      box-sizing: border-box;
      overflow: hidden;
    }

    .elem img {
      max-height: 100%;
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="image elem">
      <img src="https://www.hd-wallpapersdownload.com/script/bulk-upload/lion-big-wallpapers.jpg" />
    </div>
    <div class="elem">TEXT TEXT TEXT</div>
  </div>
</body>

</html>

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.