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更多理解或垂直边距/填充%

  • 占位符在IE9中
  • 我可以避免在iPhone或Android上使用HTML5的原生全屏video播放器吗?
  • 使用javascript / jQuery获取data- *属性列表
  • 为什么音video事件没有泡沫?
  • Twitter Bootstrap中的响应式表格处理
  • 页脚底部或内容,以较低者为准
  • HTML5如何“取代”Flash?
  • Html5画布drawImage:如何应用抗锯齿
  • 是否有一种Android的Firebug或JavaScript控制台debugging?
  • 在页面加载时启动Bootstrap模式
  • Google字体url在w3.org上中断HTML5validation