title: Set width according to height
body: <p>I saw solution for height depending on width: <a href="https://stackoverflow.com/questions/21537806/css-height-same-as-width">css height same as width</a>. Or here: <a href="https://stackoverflow.com/a/6615994/2256981">https://stackoverflow.com/a/6615994/2256981</a>.
  But my question is opposite.</p>
  
  <p>My element:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="square"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Style for it:</p>
  
  <pre><code>body, html {
      margin: 0;
      height: 100%;
      min-height: 300px;
      position: relative;
  }
  div#square { /* My square. */
      height: 75%; /* It's height depends on ancestor's height. */
      width: 75vh; /* If supported, preliminarily sets it's width. */
      position: absolute; /* Centers it. */
      left: 50%; top: 50%; transform: translate(-50%, -50%);
      background-color: darkorange; /* Makes it visible. */
  }
  </code></pre>
  
  <p>Script, that keeps it square:</p>
  
  <pre><code>window.onload = window.onresize = function (event) {
      var mySquare = document.getElementById("square");
      mySquare.style.width = mySquare.offsetHeight + 'px';
  };
  </code></pre>
  
  <p>Complete code here: <a href="http://jsfiddle.net/je1h/hxkgfr9g/" rel="noreferrer">http://jsfiddle.net/je1h/hxkgfr9g/</a></p>
  
  <p>The question is to make the same thing in pure CSS. No scripting.</p>