title: CSS to make images resize and fit any screen the same
body: <p>I've been working with a temp page at <a href="http://www.flywavez.com">http://www.flywavez.com</a> but I can't get the image to resize and be the same in all screen resolutions. On the iPhone it cuts the girl off before the waist, and it fits perfectly when viewed on my 19" laptop screen with the res at 1366 x 768, and even when I fed the video to my 55" TV via VGA from my laptop. However when I view at larger monitors with greater resolution, there is a big space and obvious view where the image size ends. I thought I had resizing CSS with 
          /* Tablet Landscape */
          @media screen and (max-width: 1060px) {
              #wrapper { width:67%; }
           }</p>
  
  <pre><code>    /* Tabled Portrait */
      @media screen and (max-width: 768px) {
          #wrapper { width:100%; }
       }
  
      /* Tabled Portrait */
      @media screen and (max-width: 768px) {
          #wrapper { width:100%; }
       }
  
       /* iphone */
      @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
          img { max-width: 100%; }
      }
  
      /* ipad */
      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  img { max-width: 100%; }
      }
  </code></pre>
  
  <p>I want this image to display on all resolutions as it does when seen on the 1366 x 768.</p>
  
  <p>Thanks for any help.</p>