title: Using jQuery to stretch an image to fill entire div, which resizes on window resize
body: <p>I know this has been asked in some way before, but none of the solutions I can find quite do everything, and I'm struggling to mix them up.</p>
  
  <p>I have a webpage made up of a series of panels, and I'm using jQuery to resize each panel to fill the document window, and resize again if the window is resized.</p>
  
  <p>In some of the panels I have images, and I'd like the images to fill the entire div, without skewing, and to resize when the window is resized. </p>
  
  <p>I have managed to get the image to resize with the width of the window, but if the window becomes too long, there is empty space below the image.</p>
  
  <p>It might be made slightly more complicated by the fact that some of the panels are slideshows using the jQuery cycle plugin.</p>
  
  <p>Here's some code:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="panel-one" class="panel"&gt;
  
      &lt;div class="cycle-slideshow" data-cycle-slides="&gt; div"&gt;
  
          &lt;div id="slide-one" class="slide"&gt;
  
              &lt;a href="http://www.flickr.com/photos/blmiers2/6128832572/" title="Grizzly Bear - Animal - Wildlife - Alaska by blmiers2, on Flickr"&gt;&lt;img src="http://farm7.staticflickr.com/6077/6128832572_c46d6ecace_b.jpg" width="1024" height="683" alt="Grizzly Bear - Animal - Wildlife - Alaska"&gt;&lt;/a&gt;
  
          &lt;/div&gt;&lt;!--#slide-one--&gt;
  
      &lt;div id="slide-two" class="slide"&gt;
  
              &lt;a href="http://www.flickr.com/photos/peterlee79/5146115834/" title="Bear by Peter Lee(&amp;amp;#51060;&amp;amp;#50896;&amp;amp;#55148;), on Flickr"&gt;&lt;img src="http://farm2.staticflickr.com/1320/5146115834_9bb65ea57d_b.jpg" width="760" height="507" alt="Bear"&gt;&lt;/a&gt;
  
          &lt;/div&gt;&lt;!--#slide-two--&gt;
  
          &lt;div id="slide-three" class="slide"&gt;
  
             &lt;a href="http://www.flickr.com/photos/upim/305578292/" title="bear by Timo Heuer, on Flickr"&gt;&lt;img src="http://farm1.staticflickr.com/119/305578292_2f249d9de3_b.jpg" width="1024" height="768" alt="bear"&gt;&lt;/a&gt;
  
          &lt;/div&gt;&lt;!--#slide-three--&gt;
  
      &lt;/div&gt;&lt;!--.cycle-slideshow--&gt;
  
  &lt;/div&gt;&lt;!--#panel-one--&gt;
  
  &lt;div id="panel-two" class="panel"&gt;
  
      &lt;div class="content"&gt;
  
      I'm panel two 
  
      &lt;/div&gt;&lt;!--.content--&gt;
  
  &lt;/div&gt;&lt;!--#panel-two--&gt;
  
  &lt;div id="panel-three" class="panel"&gt;
  
      &lt;a href="http://www.flickr.com/photos/lobstermassage/25347643/" title="Bear by CiroNT, on Flickr"&gt;&lt;img src="http://farm1.staticflickr.com/23/25347643_cac744b73a_b.jpg" width="1024" height="680" alt="Bear"&gt;&lt;/a&gt;
  
   &lt;/div&gt;&lt;!--#panel-three--&gt;
  </code></pre>
  
  <p>​
  <strong>CSS:</strong></p>
  
  <pre><code>.panel {
  position: relative;
  overflow: hidden;
  width: 100%;
  z-index: 1;
  }
  
  #panel-one {
  background: #888;    
  }
  
  #panel-two {
  background: #84c6d6;
  }
  
  #panel-three {
  background: #444;
  }
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$(function(){
  
      $('.panel, .cycle-slide, .slide').css({'height':($(window).height())+'px'});
  
      $(window).resize(function(){
      $('.panel, .cycle-slide, .slide').css({'height':($(window).height())+'px'});
      });
  
  });
  
  
   div = $(".panel");
     imgsrc = div.find('img').attr('src');
  
     var img = new Image()
     img.onload = function(){
          imgw = img.width;
          imgh = img.height;
  
          resizeMyImg(imgw,imgh);
          div.find('img').show();
  
          $(window).resize(function(){ resizeMyImg(imgw,imgh) });
  
          }
  
     img.src = imgsrc
  
     function resizeMyImg(w,h){     
        //the width is larger
        if (w &gt; h) {
          //resize the image to the div
          div.find('img').width(div.innerWidth() + 'px').height('auto');
        }        
        else {
          // the height is larger or the same
          //resize the image to the div
          div.find('img').height(div.innerHeight() + 'px').width('auto');
        }
  
       }
  </code></pre>
  
  <p>​
  And here's a fiddle of where I'm up to: <a href="http://jsfiddle.net/pwQdV/" rel="nofollow">http://jsfiddle.net/pwQdV/</a></p>