title: Resize img to window size keeping aspect ratio / no overflow on height or width
body: <p>I realise this question has been asked multiple times in differently worded titles and options, but i have yet to find something that works for me.</p>
  
  <p>Im trying to have an img fill most of the screen (keeping its aspect ratio) without overflowing the edges. (Basically what the firefox browser accomplishes when viewing an image)</p>
  
  <p>Most that i've tried either works in only one direction ie. width will resize but will end up overflowing the height and the same for the other way, either with CSS or JScript. Also playing a factor in my trouble is that i want to aplly this to both portrait and landscape images (More or less any image i have on the site)</p>
  
  <p>This seems like it should work using pure CSS but doesnt (im not completely knowledgeable in all CSS though): </p>
  
  <p><a href="http://jsfiddle.net/XCfQg/4/" rel="nofollow" title="JSFiddle">Link to JSFiddle</a></p>
  
  <pre><code>body, html {
      margin:auto;
      padding:6px;
      height:100%;
      width:100%;
  
  }
  img {
      max-width:100%;
      max-height:100%;
  }
  </code></pre>
  
  <p>There are a hand full of other scripts as well, but this post is getting a bit long.</p>
  
  <p>Could anyone help me out containing my images within the screen, with either JQuery or CSS (within or without a DIV)</p>
  
  <p>Thanks in advance,</p>