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