css宽度与高度相同

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

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

我更喜欢用css而不是javascript来做。

预先感谢您。

2014-02-15 giorgos

这个问题可能的重复：http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout – dpwivagg

@dpwivagg我不这么认为。 OP希望'宽度：与高度相同'而不是'高度：与宽度相同'。 –

你不能用css引用其他的css语句。你可以使用较少的CSS，这将允许你这样做。 http://lesscss.org/ – Calvin

在目前这样做（据我所知）是使用视窗涉及值（VH/VW）

的支持是不是在那一刻伟人的唯一CSS方式：http://caniuse.com/viewport-units但这里有一个快速演示

CSS

.box { 
    background-color: #00f; 
    width: 50vw; 
    height:50vw; 
}

该箱子是响应式的，但始终保持平方。他们指的是不同的事情都是家长的相关尺寸

纯％值不会如height:100%工作不等于width:100%。

2014-02-15 16:46:19

我认为这是我真正想要的......我会尝试。谢谢 – giorgos

任何想法如何将这样的'.box'元素定位在它的父元素中，使它在水平方向和垂直方向都居中？ –

有很多关于SO的答案。只是寻找一段时间。 –

回答