CSS宽度与宽度相同

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

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

那可能吗?

3 Solutions collect form web for “CSS宽度与宽度相同”

这个效果可以用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更多理解或垂直边距/填充%

  • 将数据URL中的图像绘制到canvas上
  • 页脚底部或内容,以较低者为准
  • 在jquery中从数据属性中检索布尔数据
  • 具有数据属性的SelectListItem
  • 使用HTML5历史API的好教程(Pushstate?)
  • 检测'transform:translate3d'的支持
  • PERSISTENT文件系统存储在哪里用chrome存储?
  • 隐藏属性(HTML5)和display:none规则(CSS)之间有什么区别?
  • HTML5 LocalStorage:检查密钥是否存在
  • <section>和<div>有什么区别?
  • HTML5canvasctx.fillText不会做换行符?