CSS宽度与宽度相同

我想在我的CSS文件中做下一个技巧，以便width = height而不设置像素。我想这样做，所以无论浏览器的分辨率是什么，在这两个维度上有相同的值。

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

那可能吗？

这个效果可以用padding或margin来伪造，因为这个值是相对于元素容器的width的。

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

你也可以用新的CSS视口单位来做到这一点。

小提琴

CSS

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

在现代浏览器（IE9 +）（ caniuse ）上支持相当不错

您可以在％值的伪元素上使用垂直填充，因此它将宽度作为参考，并允许它轻松地将内容插入到该方块中 。

基本上可以是：

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

要么

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

请参阅： http ： //dev.w3.org/csswg/css-box/#the-margin-properties更多理解或垂直边距/填充％