CSS宽度与宽度相同

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

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

那可能吗?

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

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

检查这个http://jsfiddle.net/4z8PT/

你也可以用新的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://codepen.io/anon/pen/bBrgl

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