1

我知道以前有人问过这个问题，但是我能找到的解决方案都没有，而且我正在努力将它们混合在一起。

我有一个由一系列面板组成的网页，我正在使用 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/

4

2 回答 2

0

我认为您可以使用该周期的第 2 版。

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

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

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

于 2012-11-26T21:58:18.927 回答
0

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

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');
}
于 2012-11-26T22:05:42.077 回答