[Actualización: Aunque descubrí este truco de forma independiente, desde entonces he aprendido que Thierry Koblentz me ganó. Puedes encontrar su artículo de 2009 en Una Lista Aparte. Crédito cuando se debe crédito.]

Sé que esta es una pregunta antigua, pero me encontré con un problema similar que resolví solo con CSS. Aquí está mi entrada de blog que discute la solución. Incluido en el post es un ejemplo en vivo. El código se repostea debajo.

HTML:

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

CSS:

#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! */
}

#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 en función del contenedor padre, puede establecer la altura en 0 y establecer padding-bottom en el porcentaje que se calculará en función del ancho actual:

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

Esto funciona bien en todos los navegadores principales.

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

Es posible sin ningún Javascript:)

Este artículo lo describe perfectamente - http://www.mademyday.de/css-height-equals-width-with-pure-css.html

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%;
}

Simple y neet : utilice unidades vw para una altura/anchura sensible de acuerdo con el ancho de la ventana.

Vw: 1/100 de la anchura de la ventana. (Fuente MDN )

DEMO

HTML:

<div></div>

CSS para una relación de aspecto 1: 1:

div{
    width:80vw;
    height:80vw; /* same as width */
}

Tabla para calcular la altura de acuerdo con la relación de aspecto deseada y la anchura del elemento.

   aspect ratio  |  multiply width by
    -----------------------------------
         1:1      |         1
         1:3      |         3
         4:3      |        0.75
        16:9      |       0.5625

Esta técnica permite usted a:

• inserte cualquier contenido dentro del elemento sin usar position:absolute;
• no hay marcado HTML innecesario (solo un elemento)
• adaptar la relación de aspecto de los elementos de acuerdo con la altura de la vista utilizando unidades vh
• puede hacer un cuadrado receptivo u otra relación de aspecto que siempre se ajuste a la vista de acuerdo con la altura y el ancho de la vista (consulte esta respuesta : Cuadrado receptivo de acuerdo con el ancho y el alto de la vista o esto demo )

Estas unidades son compatibles con IE9 + ver canIuse para más información

Método extremadamente simple jsfiddle

HTML

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

CSS

#container {
    width: 50%; /* desired width */
}

#element {
    height: 0;
    padding-bottom: 100%;
}

Ampliando la técnica de relleno superior/inferior, es posible usar un pseudo elemento para establecer la altura del elemento. Utilice márgenes de desbordamiento, flotación y negativos para eliminar el pseudo elemento de la vista y el flujo.

Esto le permite colocar contenido dentro de la caja sin usar un div adicional y/o posicionamiento CSS.

.fixed-ar {
  overflow: hidden;
}
.fixed-ar:before {
  content: "";
  float: left;
  margin-left: -10px;
  width: 10px;
  padding-top: 100%;
}
.fixed-ar-4-3:before {
  /* 100 * 3 / 4 = 75 */
  padding-top: 75%;
}
.fixed-ar-16-9:before {
  /* 100 * 9 / 16 = 56.25 */
  padding-top: 56.25%;
}
/* examples */
.fixed-ar {
  margin: 1em 0;
  max-width: 400px;
  color: #999;
  background: #EEE url(http://lorempixel.com/640/480/food/5/) center no-repeat;
  background-size: contain;
}

<div class="fixed-ar fixed-ar-4-3">4:3 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-16-9">16:9 Aspect Ratio</div>

Realmente esto pertenece como un comentario a la respuesta de Nathan, pero no se me permite hacer eso todavía...
Quería mantener la relación de aspecto, incluso si hay demasiado material para caber en la caja. Su ejemplo expande la altura, cambiando la relación de aspecto. He encontrado la adición

overflow: hidden;
overflow-x: auto;
overflow-y: auto;

A la .element ayudó. Véase http://jsfiddle.net/B8FU8/3111 /

Ancho: 80vmin; altura: 80vmin;

CSS hace el 80% de la vista, altura o anchura más pequeña

Http://caniuse.com/#feat=viewport-units