javascript - 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 should be equal to the height (100% of the large container. The large container is more than 100% of the screen). The ratio has to be width=height to keep the square.

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>