Question

我知道之前已经以某种方式提出过这个问题，但我找不到任何解决办法，但我很难将它们混淆起来。

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

在某些面板中，我有图像，我希望图像能够填充整个div而不会出现偏斜，并在调整窗口大小时调整大小。

我已设法使用窗口宽度调整图像大小，但如果窗口变得太长，图像下方会有空白区域。

由于某些面板是使用jQuery循环插件的幻灯片，因此可能会稍微复杂一些。

以下是一些代码：

HTML：

<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-->

的 CSS：

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

#panel-one {
background: #888;    
}

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

#panel-three {
background: #444;
}

jQuery的：

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

     }

这里有一个我要遵循的小提琴：http://jsfiddle.net/pwQdV/

Answer 1

我认为你可以使用循环的第2版。

http://jquery.malsup.com/cycle2/

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

示例：http://jsfiddle.net/mBDyH/

Answer 2

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

http://jsfiddle.net/pwQdV/9/

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

使用jQuery拉伸图像以填充整个div，在窗口调整大小时调整大小

2 个答案: