<img /> scale to closest fit aspect ratio
<p>I want to make the logo (in the top left corner) always keep its aspect ratio, but I also want it to stay in the right place, for <em>any</em> browser. Here's my code:</p>

<pre><code>&lt;body&gt;
&lt;img src="/home/istom/Dropbox/bcs logo border.png" width="25%" height="25%" style="position:absolute;top:6%;left:9.7%;z-index:1" /&gt;
&lt;div style="position:absolute;top:12.5%;left:12.5%;width:75%;height:75%;border-style:solid;border-color:#6699cc;border-width:3px;background-image:url('/home/istom/Downloads/BCHands.jpg');background-position:95% 50%;background-repeat:no-repeat;background-size:60% auto;"&gt;
    &lt;div style="float:left;position:relative;top:25%;left:5%;"&gt;Hello&lt;/div&gt;
&lt;/div&gt; 
</code></pre>

<p></p>

<p>If you use this code, and resize your window, you'll see the logo is stretched infuriatingly out of shape. How can I make sure it keeps it's aspect ratio?</p>

<p>PS: If anyone can tell me how to do the same for the background-image that would great.
PS: As little jQuery as possible (still, if jQuery is the only way...)!</p>
