title: How can I resize and crop/letterbox image to completely fill div with image whatever resize
body: <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 cropped 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 noreferrer">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 something like it) be made to work the same way within a % sized div?</p>