In addition to scaling horizontally, can I scale a div and its contents vertically?
<p>I have the following structure;</p>

<pre><code>&lt;body&gt;
    &lt;div id="splash"&gt;
      &lt;img /&gt; &lt;!-- 512x512 --&gt;
      &lt;progress&gt;&lt;/progress&gt;
      &lt;img /&gt; &lt;!-- 512x512 --&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>And this css;</p>

<pre><code>html, body {
    height: 100%;
}

#splash {
    max-height: 100%; /* does nothing */
}

#splash img {
    max-width: 100%;
    height: auto;
}
</code></pre>

<p>This results in the entire div scrolling to fit within the width of the browser window.  Currently this also scales the div in height, pushing the contents below the bottom bounds of the browser window.</p>

<p>Is it possible to also scale the div vertically such that its contents shrink so no part of it drops below the bottom bound of the browser window?</p>

<p><a href="https://jsfiddle.net/dvr1xupu/" rel="nofollow">fiddle</a></p>