title: Is there a way to make an image go full width and height?
body: <p>I'd like a scaleable/flexible fullscreen inline image (no cropping) that will allow for content to sit beneath it just like any other webpage. Is this possible? All I keep seeing is solutions for position:fixed; which, isn't feasible for me.</p>
  
  <p>I have been playing around with the code over at: <a href="http://css-tricks.com/perfect-full-page-background-image/" rel="nofollow">http://css-tricks.com/perfect-full-page-background-image/</a> but modifying them to do what I want doesn't seem to work. The scaling of the image is all wrong and often crops the image, which again isn't what i'd like it to do.</p>
  
  <p>Here is the code for as a rough idea:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;!-- full width and height image --&gt;
  &lt;div id="feature-wrapper"&gt;
     &lt;img src="img/feature.jpg"/&gt;
  &lt;/div&gt;
  &lt;!-- /end fullwidth/height image --&gt;
  
  &lt;!-- lots of content that sits directly beneath big image --&gt;
  &lt;img src="img/about-mug.jpg"/&gt;
  
  &lt;img src="img/project1.jpg"/&gt;
  
  &lt;p&gt;Some more content beneath feature&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any pointers appreciated. jQuery solutions welcome :)</p>