How to keep a div contained within the viewport whilst maintaining aspect ratio

How to keep a div contained within the viewport whilst maintaining aspect
ratio

There exists a square div that is an arbitrary percent wide (and the same
amount high) that needs to scale with the window.
It must stay within the bounds of the viewport (ie: not clipping outside)
and maintain its square shape - essentially duplicating the
background-size: contain; feature of CSS.
I need to support iOS Safari v3.2, so I can't use vw/vh/vmin/vmax and
would strongly prefer a CSS-only solution.