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.