[Actualización: aunque descubrí este truco de forma independiente, desde entonces supe que Thierry Koblentz se me adelantó. Puede encontrar su artículo de 2009 en A List Apart. Crédito a quien crédito merece.]

Sé que esta es una vieja pregunta, pero encontré un problema similar que resolví solo con CSS. Aquí está mi publicación de blog que analiza la solución. Incluido en la publicación hay un ejemplo en vivo . El código se vuelve a publicar a continuación.

 #container { display: inline-block; position: relative; width: 50%; } #dummy { margin-top: 75%; /* 4:3 aspect ratio */ } #element { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: silver/* show me! */ }

 <div id="container"> <div id="dummy"></div> <div id="element"> some text </div> </div>

¡Hay una manera de usar CSS!

Si establece su ancho según el contenedor principal, puede establecer la altura en 0 y establecer padding-bottom en el porcentaje que se calculará según el ancho actual:

 .some_element { position: relative; width: 20%; height: 0; padding-bottom: 20%; }

Esto funciona bien en todos los principales navegadores.

JSFiddle: https://jsfiddle.net/ayb9nzj3/

Es posible sin Javascript :)

El HTML:

 <div class='box'> <div class='content'>Aspect ratio of 1:1</div> </div>

El CSS:

 .box { position: relative; width: 50%; /* desired width */ } .box:before { content: ""; display: block; padding-top: 100%; /* initial ratio of 1:1*/ } .content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* Other ratios - just apply the desired class to the "box" element */ .ratio2_1:before{ padding-top: 50%; } .ratio1_2:before{ padding-top: 200%; } .ratio4_3:before{ padding-top: 75%; } .ratio16_9:before{ padding-top: 56.25%; }