Div Square, width size based on 100% height

Question

I\'m trying to make a responsive square with the width size based on the (100%) height of the element. I believe it\'s impossible using only CSS.

The square width sh

Answer 1

You could do this with a tiny inline image. No JS, no extra files.

.container {
  height: 150px;
  width: 100%;
  text-align: center;
  background: #acd;
}
    	
.square {
  display: inline-block;
  height: 100%;
  background: #691;
}

<div class="container">
  <div class="square">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" height="100%">
  </div>
</div>