css height igual que el ancho

Me gustaría hacer el siguiente truco en mi archivo css para que width = height sin establecer píxeles. Quiero hacer esto para que cualquiera que sea la resolución del navegador, tenga los mismos valores en estas dos dimensiones.

#test{ width: 20%; height: (same as width); } 

¿Es eso posible?

Ese efecto puede simularse con padding o margin ya que los valores son relativos al width del contenedor para el elemento.

 div { background: orange; width: 20%; padding-top: 20%; } 
 

También podría hacer esto con las nuevas unidades de ventana CSS .

VIOLÍN

CSS

 div { background:pink; width:20vw; /* 20% of the viewport width */ height: 20vw; } 

El soporte es bastante bueno en los navegadores modernos (IE9 +) ( caniuse )

Puede usar el relleno vertical en un pseudo-elemento en% value, por lo que toma ancho como referencia y le permite insertar fácilmente contenido en ese cuadrado .

Básicamente podría ser:

 #test{ width: 20%; } #test:before{ content:''; padding:50% 0; /* vertical value as 100% equals width */ display:inline-block; } 

o

 #test{ width: 20%; overflow:hidden; } #test:before{ content:''; padding-top:100%; /* vertical value as 100% equals width */ float:left; } 

http://codepen.io/anon/pen/bBrgl

Consulte: http://dev.w3.org/csswg/css-box/#the-margin-properties para obtener más información o margen vertical / relleno en%