css height même largeur

Je voudrais faire le tour suivant dans mon fichier CSS pour que width = height sans définir de pixels. Je veux faire cela, quelle que soit la résolution du navigateur, avoir les mêmes valeurs sur ces deux dimensions.

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

Est-ce possible?

Cet effet peut être simplement simulé avec un padding ou une margin car ces valeurs sont relatives à la width du conteneur pour l’élément.

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

Vous pouvez également le faire avec les nouvelles unités de fenêtre CSS .

VIOLON

CSS

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

Le support est plutôt bon sur les navigateurs modernes (IE9 +) ( caniuse )

Vous pouvez utiliser le remplissage vertical sur un pseudo-élément en valeur%, il faut donc de la largeur comme référence et lui permettre d’insérer facilement du contenu dans ce carré .

Fondamentalement, cela pourrait être:

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

ou

 #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

Voir: http://dev.w3.org/csswg/css-box/#the-margin-properties pour plus de compréhension ou de marge / remplissage vertical en%