Full Browser Image that Maintains Ratio
<p>Basically what I'm looking for is a way for an image to always be as big as the browser window but maintaining it's aspect ratio. The image should always resize with the smallest browser edge so that it hangs off the edge of the frame but never shows the white underneath. I've gotten this far:</p>

<pre><code>window.onload = checkSize;
window.onresize = resize;

function checkSize(){
    var x = self.innerWidth;
    document.getElementById("picture").style.width = (x)+"px";
}

function resize(){
    var x = self.innerWidth;
    var y = self.innerHeight;
    var picy = document.getElementById("picture").style.height;
    document.getElementById("picture").style.width = (x)+"px";
    if (picy &gt;= y){
        document.getElementById("picture").style.height = (y)+"px";
        document.getElementById("picture").style.removeProperty("width");
    }
}
</code></pre>

<p>Which in my head worked as follows:</p>

<ul>
<li>resize with width</li>
<li>if the image height is less that the window height, start resizing the height and remove the width property (to keep the aspect ratio)</li>
</ul>

<p>Am I close?</p>
