title: CSS: make div width proportional to height
body: <p>This is a little tricky to explain, but: I want a responsive-height div (<code>height: 100%</code>) that will scale the <strong>width</strong> proportional to the <strong>height</strong> (not vice versa).</p>
  <p>I know of <a href="https://wellcaffeinated.net/articles/2012/12/10/very-simple-css-only-proportional-resizing-of-elements/" rel="nofollow noreferrer">this method</a> utilising a <code>padding-top</code> hack to make the height proportional to the width, but I need it to work the other way around. Having said that, I'm not hugely keen on the additional requirement of absolutely-positioned elements for the content in that method, so I realise I may well be asking for the moon on a stick here.</p>
  <p>To help visualise, here is an image:</p>
  <p><img src="https://i.stack.imgur.com/gsKm5.png" alt="Visual representation of desired effect" /></p>
  <p>...and here is a <a href="http://jsfiddle.net/V2dyZ/" rel="nofollow noreferrer">jsFiddle</a>, illustrating pretty much the same thing.</p>
  <p>It is worth noting that I am already using the <code>:before</code> and <code>:after</code> pseudo-elements to vertically-align the content of the box I want to scale proportionally.</p>
  <p>I would really enjoy not having to revert to jQuery, just because there's going to be an inherent requirement for resize handlers and generally more debugging all round... but if that's my only choice, then <em>fiat</em>.</p>