CSS: hacer div ancho proporcional a la altura

Oh,probablemente podrías usar ese truco de "relleno-top".

width: 50%;
height: 0;
padding-bottom: 50%;

Http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares

O:

.square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
    background: #4679BD;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}

Http://codeitdown.com/css-square-rectangle /

El relleno vertical en CSS está relacionado con el ancho del elemento, no con la altura.

La solución font requiere que se conozca la altura. He encontrado una solución para hacer un elemento proporcional dentro de un div padre con anchuras y alturas desconocidas. Aquí hay una demo.

El truco que estoy usando es tener una imagen usada como espaciador. El código explicado:

<div class="heightLimit">
 <img width="2048" height="2048" class="spacer"
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAA
       P///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
 <div class="filler">
  <div class="proportional">
  </div>
 </div>
</div>

Así que no es el más bonito con dos divs extra y una imagen inútil. Pero podría ser peor. El elemento de imagen debe tener anchura y altura con las dimensiones deseadas. Necesidad de anchura y altura para ser tan grande como el tamaño máximo permitido (una característica!).

El css:

.heightLimit {
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: auto;
 max-width: 100%;
 overflow: hidden;
}

Este elemento es limitar la altura, pero expandirse horizontalmente (width: auto) aunque nunca más allá del padre (max-width). El desbordamiento debe ocultarse porque algunos niños sobresalirán fuera del div.

.spacer {
 width: auto;
 max-height: 100%;
 visibility: hidden;
}

Esta imagen es invisible y se escala proporcionalmente a la altura, mientras que el ancho se ajusta y obliga a ajustar también el ancho del padre.

.filler {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
}

Este elemento es necesario para llenar el espacio con un contenedor absolutamente posicionado.

.proportional {
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 100%;
}

Y aquí nuestro elemento proporcional obtiene una altura proporcional al ancho con el truco familiar padding-bottom.

Desafortunadamente, hay un error en Chrome e IE, por lo que si modifica el elemento padre usando Javascript, como en mi demo, las dimensiones no se actualizarán. Hay un truco que se puede aplicar para resolver eso, como se muestra en mi demo.

Basado en la respuesta de @kunkalabs (que es realmente inteligente), se me ocurrió una solución que te permite preservar el tamaño de fuente heredado.

HTML:

<div id='rect'>
    <div id='content'>Text</div>
</div>

CSS:

#rect {
    font-size: 1000%;
    height: 1em;
    width: 1em;
    position: relative;
}

#content {
    font-size: 10%;
}

Así que básicamente el tamaño de fuente de #content es (100 / rect rectFontSize) * 100 por ciento del rectángulo. Si necesita un tamaño de píxel definido para el rectángulo, puede establecer el tamaño de fuente del padre de #rect...de lo contrario, simplemente ajuste el tamaño de fuente hasta que esté aproximadamente donde desea que esté (y enfade a su diseñador en proceso).

Puede usar view height (vh) como la unidad para el width.

Aquí hay un ejemplo con el margen de 20px que pidió.

 .parent {
   margin : 20px;
}
.child {
   width: calc(100vh - 40px);
   height : calc(100vh - 40px);
   margin:0 auto;
   background: red;
   box-sizing:border-box;
   padding:10px;
}

Ver el violín : https://jsfiddle.net/svobczp4 /

Haga que el DIV padre se comporte como una celda de tabla y alinee el elemento hijo verticalmente. No hay necesidad de hacer ningún truco de relleno.

HTML

<div class="parent">
<img src="foo.jpg" />
</div>

CSS

.parent { width:300px; height:300px; display:table-cell; vertical-align:middle; }