title: CSS square based on height
body: <p>Is it possible to make a square <code>div</code> with css based on its <strong>height</strong> in <strong><em>pixels</em></strong>?</p>
  
  <p>This question is <em>similar</em> to <a href="https://stackoverflow.com/questions/23789143/maintain-aspect-ratio-of-a-div-according-to-height"><strong>this one</strong></a> (marked as duplicate), but in this case I want height <strong>to be set in pixel or any unit.</strong></p>
  
  <p>When based on <strong>width</strong>, there is a simple solution :</p>
  
  <pre><code>.mydiv {
      height: 0;
      padding-bottom: 100%;
  }
  </code></pre>
  
  <p>But here <strong>'height follows width'</strong>. I'm looking for solution where <strong>'width follows height'</strong>. So if I would set <strong>height</strong> to 300px, <strong>width</strong> would follow it.</p>
  
  <p>For now I'm doing it using javascript, updating on window resize. But I would like to find a CSS solution, thats why <strong>I'm not looking for a javascript solution</strong></p>
  
  <p>Here is a <a href="http://jsfiddle.net/h9ewm/1/" rel="nofollow noreferrer">playground</a></p>