1

これは以前に何らかの方法で尋ねられたことは知っていますが、私が見つけることができる解決策はどれもすべてを行うことができず、それらを混同するのに苦労しています.

一連のパネルで構成されたWebページがあり、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

空白が必要ない場合は、画像の最大寸法ではなく、最小寸法に基づいてサイズを変更する必要があります。これは、ほとんどの場合、画像が一方の次元で 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');
}
于 2012-11-26T22:05:42.077 に答える
0

サイクルのバージョン 2 を使用できると思います。

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

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

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

于 2012-11-26T21:58:18.927 に答える