0

ブートストラップ カルーセルを使用しており、常にスライダーがウィンドウ (またはその他のデバイス) に収まるように変更したいと考えています。ここに私の解決策があります:

もしそうimageRatio > winRatioなら
stretch images height to it's max
そうでなければ
stretch images width to it's max

画像の比率がウィンドウの比率より大きい場合はmax-height:100%;max-width:none;画像に追加し、ウィンドウの比率が画像の比率より大きい場合は追加しますmax-width: 100%; max-height: none;

要するに、これらはすべて機能しますが、どういうわけか、ウィンドウ画像の比率とウィンドウ比率のサイズを変更すると等しくなります!! これは `console.log(winRatio, imgRatio); による結果です。

1.0709046454767726 1.5051546391752577 /* this is expected results but */
1.1124694376528117 1.1124694376528117 /* when i stop resizing */

私のHTML：

<div class="row-fluid">

    <div id="top-slider" class="carousel slide">
        <!-- Carousel pattern mask -->
        <div class="mask"></div>

        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item"><img src="img/slider/slide01.jpg" alt="Slide 01" /></div>
            <div class="item"><img src="img/slider/slide02.jpg" alt="Slide 02" /></div>
            <div class="item"><img src="img/slider/slide03.jpg" alt="Slide 03" /></div>
        </div>

        <!-- Carousel nav -->
        <div class="carousel-control">
            <a class="left" href="#top-slider" data-slide="prev"></a>
            <a class="right" href="#top-slider" data-slide="next"></a>
        </div>
    </div>

</div>
<!-- /site top slider -->

Javascript:

// DOM Ready
jQuery(document).ready(function($){

    /* strech homepage top slider's slides to fit device screen
    ------------------------------------------------------------------- */
    function fitSlider() {
        var wH = $(window).height() - $('#top-header').height();
        var wW = $(window).width();
        var winRatio = wW / wH;
        var imgH = $('#top-slider .carousel-inner').height();
        var imgW = $('#top-slider .carousel-inner').width();
        var imgRatio = imgW / imgH;
        console.log(winRatio, imgRatio);

        $('#top-slider').css('height', wH);

        if ( imgRatio > winRatio )
        {
            $('#top-slider .carousel-inner .item img').addClass('fit-height');
        }
        else
        {
            $('#top-slider .carousel-inner .item img').removeClass('fit-height');
        }
    }

    // On window resized fire this event
    $(window).bind('resize',function() {
        //Update slider
        fitSlider();
    });
    // On window loaded fire this event
    $(window).load(function() {
        fitSlider();
    });
});
4

1 に答える 1

1

スクリプトを初めて実行すると、画像のサイズが変わります。したがって、次回フェッチすると、元の初期の高さではなく、設定した画像のサイズが取得されます。画像の初期寸法を何らかのグローバル変数に保存し、ウィンドウの寸法をそれらと比較する必要があります。

これらを window.load 関数にシフトします。そして、これらの変数をグローバルにします。

var imgH = $('#top-slider .carousel-inner').height();
var imgW = $('#top-slider .carousel-inner').width();
于 2013-03-28T08:59:28.290 に答える