使用jQuery拉伸图像以填充整个div，该div会根据窗口大小调整大小

我知道以前有人问过这个问题，但我所能找到的解决方案中没有一个能解决所有问题，我正在努力把它们混合起来

我有一个由一系列面板组成的网页，我正在使用jQuery调整每个面板的大小以填充文档窗口，如果窗口被调整大小，则再次调整大小

在一些面板中，我有图像，我希望这些图像填充整个div，而不倾斜，并在调整窗口大小时调整大小

我已经设法让图像与窗口的宽度一起调整大小，但是如果窗口变得太长，图像下方就会出现空白

一些面板是使用jQuery cycle插件的幻灯片，这可能会稍微复杂一些

下面是一些代码：

HTML:

jQuery：

​

---

这里有一个我正在做的事情：

我想你可以使用循环的第2版

---

示例：

如果不需要空白，则必须根据图像的最小尺寸（而不是最大尺寸）调整大小。这意味着，在大多数情况下，图像的大小将使其在一个维度上溢出div，并与另一个维度上的div完全匹配。如果在div上设置overflow:hidden，它将有效地裁剪图像的溢出部分

<div id="panel-one" class="panel">

    <div class="cycle-slideshow" data-cycle-slides="> div">

        <div id="slide-one" class="slide">

            <a href="http://www.flickr.com/photos/blmiers2/6128832572/" title="Grizzly Bear - Animal - Wildlife - Alaska by blmiers2, on Flickr"><img src="http://farm7.staticflickr.com/6077/6128832572_c46d6ecace_b.jpg" width="1024" height="683" alt="Grizzly Bear - Animal - Wildlife - Alaska"></a>

        </div><!--#slide-one-->

    <div id="slide-two" class="slide">

            <a href="http://www.flickr.com/photos/peterlee79/5146115834/" title="Bear by Peter Lee(&amp;#51060;&amp;#50896;&amp;#55148;), on Flickr"><img src="http://farm2.staticflickr.com/1320/5146115834_9bb65ea57d_b.jpg" width="760" height="507" alt="Bear"></a>

        </div><!--#slide-two-->

        <div id="slide-three" class="slide">

           <a href="http://www.flickr.com/photos/upim/305578292/" title="bear by Timo Heuer, on Flickr"><img src="http://farm1.staticflickr.com/119/305578292_2f249d9de3_b.jpg" width="1024" height="768" alt="bear"></a>

        </div><!--#slide-three-->

    </div><!--.cycle-slideshow-->

</div><!--#panel-one-->

<div id="panel-two" class="panel">

    <div class="content">

    I'm panel two 

    </div><!--.content-->

</div><!--#panel-two-->

<div id="panel-three" class="panel">

    <a href="http://www.flickr.com/photos/lobstermassage/25347643/" title="Bear by CiroNT, on Flickr"><img src="http://farm1.staticflickr.com/23/25347643_cac744b73a_b.jpg" width="1024" height="680" alt="Bear"></a>

 </div><!--#panel-three-->

.panel {
position: relative;
overflow: hidden;
width: 100%;
z-index: 1;
}

#panel-one {
background: #888;    
}

#panel-two {
background: #84c6d6;
}

#panel-three {
background: #444;
}

$(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 > 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');
      }

     }

.cycle-slideshow img {
    display : block;
    width : 100%;
}

// notice: `h` and `w` are swapped here...
if (h > w) {
    //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');
}