5

Me gustaría crear un div que al ensanchar la página del navegador, creciera al igual que lo hace una imagen con width: 100%; height:auto;

¿Hay alguna forma a día de hoy de hacerlo?

Mi intención sería crear un div con una relación de aspecto 16:9 que aumentase en altura y anchura a medida que ensancho la página.

1

1 respuesta 1

12

Hay un truquito que te permite hacerlo muy fácilmente: cuando el padding lo defines con valores porcentuales, el valor de referencia es el ancho del contenedor. De la web de la W3C, en la página de especificaciones CSS 2:

The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.2.

Traducción y negritas mías: El porcentaje se calcula respecto al ancho de la caja generada por el bloque contenedor, incluso en los valores verticales (padding-top y padding bottom). Si el ancho del bloque contenedor depende de este elemento, entonces el resultado es indefinido.

.ratio16-9 {
  width: 100%;
  padding-bottom: 56.25%; /* resultado de 9/16 */
  background-color:gold;
}
#contenedor {

  width:30%;
  background-color: gray;
  margin: 5px;
  position:relative;
}
#main {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
<div id="contenedor">
  <div class="ratio16-9"></div>
  <div id="main">hola, este <pre>div</pre> es el contenedor interno
</div>

Ahora bien, el div 16/9 tiene un padding que ocupa todo el alto, el contenido en sí mismo tiene una altura de 0 pixels... con lo que si metemos algo ocupará algo de espacio y deformará el div. La solución es que todo lo que esté dentro no afecte al tamaño: en lugar de meter nuestro contenido en este div, que lo único que hace es dar forma y tamaño, lo metemos en otro elemento que tiene posición absoluta.

Nota: Opino que la solución correcta se va a basar en el uso de la propiedad descrita anteriormente, pero quizá mi ejemplo (prueba de concepto) no sea la más limpia. Pongo esta respuesta como wiki para que cualquier pueda añadir una mejor implementación.


Para optimizar un poco el código HTML y no tener un div vacío también podemos usar los psudoelementos ::after o ::before. Por otra parte, al tener el contenido en un div con posición absoluta si sobrepasa el tamaño del contenedor quedará fuera de éste, para evitarlo ponemos un overflow: auto; que nos muestre un scroll cuando sea necesario.

    #contenedor {
      width: 40%;
      background-color: gold;
      margin: 5px;
      position: relative;
      overflow: auto;
    }

    #contenedor::after {
      content: "";
      display: block;
      padding-bottom: 56.25%;
    }

    #main {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
<div id="contenedor">
  <div id="main">Facilis quaerat et id est aut voluptates laboriosam velit. Saepe dignissimos aut impedit sit molestiae aut quibusdam. Earum quis ratione vitae quae sit assumenda officiis dolorem. Nesciunt labore nobis porro consectetur ut.</div>
</div>Facilis quaerat et id est aut voluptates laboriosam velit. Saepe dignissimos aut impedit sit molestiae aut quibusdam. Earum quis ratione vitae quae sit assumenda officiis dolorem. Nesciunt labore nobis porro consectetur ut.

1
  • 3
    El ejemplo que has actualizado es mejor porque soluciona el problema del alto. Pienso que sería mejor si el main estuviera dentro de ratio16-9, de eso modo tendrías todo contenido en un div autónomo, en lugar de tener que tener dos div (algo como esto)
    – Alvaro Montoro
    el 17 oct. 2017 a las 14:17

Tu Respuesta

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

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