0

レスポンシブ コンテナーに配置された単純な jquery イメージ スライダーがあります。スライダーはレスポンシブに動作していますが、高さはピクセル単位で設定されており、ビューポートの最大幅では見栄えがしますが、想像できるように、ビューポートの幅が小さいとスライダーとコンテンツの間の距離が大きくなりすぎます。

CSS または jQuery を使用して、画像スライダーを含む div の高さを動的に設定し、すべてのビューポート幅で見栄えがするようにする簡単な方法があるかどうか疑問に思っています。

jQuery:

        function slideSwitch() {
            var $active = $('#slideshow DIV.active');

            if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

            var $next =  $active.next().length ? $active.next()
                : $('#slideshow DIV:first');

            $active.addClass('last-active');

            $next.css({opacity: 0.0})
                .addClass('active')
                .animate({opacity: 1.0}, 1000, function() {
                    $active.removeClass('active last-active');
                });
        }

        $(function() {
            setInterval( "slideSwitch()", 5000 );
        });

CSS:

        .responsive-container {
            width: 80%;
            margin: 0 auto;
        }

        .responsive {
            display: block;
            max-width: 100%;
            margin: 0 auto;
        }

        #slideshow {
            position:relative;
            height: 60%;
        }

        #slideshow div {
            position:absolute;
            top:0;
            left:0;
            z-index:8;
            opacity:0.0;
            background-color: #FFF;
        }

        #slideshow div.active {
            z-index:10;
            opacity:1.0;
        }

        #slideshow div.last-active {
            z-index:9;
        }

        #slideshow div img {
            display: block;
            border: 0;
            margin-bottom: 10px;
        }

HTML:

<div id="slideshow" class="responsive-container">
    <div class="active">
        <img class="responsive" src="img/slider/image1.jpg" alt="Slideshow Image 1" />  
    </div>

    <div>
        <img class="responsive" src="img/slider/image2.jpg" alt="Slideshow Image 2" />
    </div>

    <div>
        <img class="responsive" src="img/slider/image3.jpg" alt="Slideshow Image 3" />
    </div>                            
</div>

高さを動的に追加する方法はありますか: 

<div id="slideshow" class="responsive-container">

問題があるかどうかはわかりませんが、最大画像サイズは幅 531px x 高さ 400px です。

4

1 に答える 1

4

離散高さ遷移

CSSメディアクエリを使用すると、高さが変化する個別の幅を設定できます。

@media (max-width: 979px) and (min-width: 768px) {
  #slideshow {
    height: whatever;
  }
}

これらがどのように機能するかの例については（慣れていない場合）、CSS Tricks Webサイトでブラウザーのサイズを変更してください（上記のリンクを参照）。特定の幅に達すると、レイアウトが変更されます。それが実際のメディアクエリです。

連続的な高さの遷移

高さを連続的に遷移させるには、Javascriptを使用する必要があります。これがあなたが始めるのを助けるかもしれない小さなjQueryセットアップです。JSFiddleで表示します。

javascript

$(window).resize(function(){
  winWidth = $(window).width();
  $("#resize").height(winWidth*.3);
});
于 2013-03-04T18:02:57.227 に答える