css width same as height

Question

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.

Answer 1

This is my way

  aspect-ratio: 1 / 1;
  height: 100%;

Example:

.my-container {
  width: 100%;
  height: 150px;
  background: black;
  padding: 20px
}

.my-element {
  background: #fff;
  aspect-ratio: 1 / 1;
  height: 100%;
}

<div class="my-container">
  <div class="my-element">Height = Width</div>
</div>

Answer 2

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.