how can i resize and crop/letterbox image to compleatly fill div with image whatever resize
<p>This is what i need:</p>

<ul>
<li>The image must completely fill 100% the area the div covers - left to
right and top to bottom.</li>
<li>the image must not be squashed or streched -    just be croped or
must overflow.</li>
<li>The image must be kept as small as possible, so whatever the resize - you
can still see either the very sides OR the very top and bottom.</li>
</ul>

<p>The div itself will be adjusting in height and width as both are a percentage of the main window.</p>

<p>I have found a little bit of JavaScript here that is manipulating the image just how I want when the window is resized, but is displaying it in the whole window.</p>

<pre><code>&lt;html&gt; 
&lt;head&gt; 
&lt;title&gt;test&lt;/title&gt; 

&lt;script type="text/javascript"&gt; 

function resizeImage() 
{ 
    var window_height = document.body.clientHeight 
    var window_width  = document.body.clientWidth 
    var image_width   = document.images[0].width 
    var image_height  = document.images[0].height 
    var height_ratio  = image_height / window_height 
    var width_ratio   = image_width / window_width 
    if (height_ratio &gt; width_ratio) 
    { 
        document.images[0].style.width  = "100%" 
        document.images[0].style.height = "auto" 
    } 
    else 
    { 
        document.images[0].style.width  = "auto" 
        document.images[0].style.height = "100%" 
    } 
} 
&lt;/script&gt; 

&lt;/head&gt; 

&lt;body onresize="resizeImage()"&gt; 

&lt;img onload="resizeImage()" src="f/a.jpg"&gt;   

&lt;/body&gt; 
&lt;/html&gt; 
</code></pre>

<p><a href="http://generationsinc.co.uk/test/java.html" rel="nofollow">Here is a demo</a></p>

<p>Please don't just answer that all i need is: </p>

<pre><code>&lt;img style="width : 100%;"&gt;
</code></pre>

<p>This is so much more than that.</p>

<p>It's not too easy to explain but check the demo and drag the corner of the window around and that'll be worth 1000 words...!</p>

<p>Can it (or somthing like it) be made to work the same way within a % sized div? </p>

<p>Thank You so much.</p>
