css width same as height
css, html
Solution
The only CSS way of doing this at the moment (AFAIK) is using viewport relates values (vh / vw )
Support is not great at the moment: http://caniuse.com/viewport-units but here is a quick demo
JSFiddle
CSS
.box {
background-color: #00f;
width: 50vw;
height:50vw;
}
The box is responsive but will always remain square.
Pure % values will not work as `height:100%` does not equal `width:100%` as they refer to different things being the relevant dimensions of the parent.
Problem
I would like to do the next trick in my css file so that (height = width) without setting pixels. I want to do this so whatever the resolution of the browser is, to have same values on these two dimensions. ``` #test{ height: 100%; width: (same as height); } ``` I prefer to do it with css and not javascript. Thank you in advance.