title: How to keep a div contained within the viewport whilst maintaining aspect ratio
body: <p>There exists a square div that is an arbitrary percent wide (and the same amount high) that needs to scale with the window.</p>
  
  <p>It must stay within the bounds of the viewport (ie: not clipping outside) and maintain its square shape - essentially duplicating the <code>background-size: contain;</code> feature of CSS.</p>
  
  <p>I need to support iOS Safari v3.2, so I can't use <code>vw/vh/vmin/vmax</code> and would <em>strongly</em> prefer a CSS-only solution.</p>
  
  <p><img src="https://i.stack.imgur.com/Ii9A6.gif" alt="enter image description here"></p>