0

コード用の jsFiddle を作成しました: http://jsfiddle.net/kinthof/QpjnV/3/

コードは次のとおりです。

HTML:

<div class="image-container">
    <img src="http://skafte.dk/img/oel/carlsberg-pilsner-33cl-51x192.jpg" class="" title="Carlsberg Pilsner 33cl" alt="Carlsberg Pilsner 33cl" />
    <img src="http://skafte.dk/img/sodavand/faxe-kondi-25cl-54x192.jpg" class="" title="Faxe Kondi 25cl" alt="Faxe Kondi 25cl" />
    <img src="http://skafte.dk/img/sodavand/coca-cola-25cl-50x192.jpg" class="" title="Coca Cola 25cl" alt="Coca Cola 25cl" />
    <img src="http://skafte.dk/img/sodavand/frem-aeblemost-25cl-56x191.jpg" class="" title="Frem Æblemost 25cl" alt="Frem Æblemost 25cl" />
    <img src="http://skafte.dk/img/diverse/cocio-40cl-58x192.jpg" class="" title="Cocio 40cl" alt="Cocio 40cl" />
    <img src="http://skafte.dk/img/kildevand/aquador-50cl-54x191.jpg" class="" title="Aquador Kildevand 50cl" alt="Aquador Kildevand 50cl" />
</div>

CSS:

.image-container {
    margin: 0 auto;
    clear: both;
}
.image-container img {
    display: block;
    margin: 0 auto;
    float: left;
}

jQuery:

/* Finding the images width and setting the container to the sum of the widths. */
$('.image-container').each(function () {
    var width = 0;
    $(this).find('img').each(function () {
        width += $(this).width();
    })
    $(this).width(width + 'px');
});

/* Setting width to 100% if the width is larger than the viewport */
$('.image-container').each(function () {
    var vpWidth = document.documentElement.clientWidth;
    var imageContainerWidth = $(this).width();
    var numberOfElements = 0;

    if (imageContainerWidth > vpWidth) {
        $(".image-container").width('100%');
    }
});

浮かせた画像を中央揃えにしたい。これは、画像の幅を見つけてコンテナーを幅の合計に設定する最初の部分で行われ、CSS で中央に配置されます。

次の目的は、ビューポートが .image-container の幅よりも小さい場合、.image-containers の幅を 100% に設定することです。

ただし、これはページがリロード/更新されたときにのみ発生します。

私の質問は次のとおりです。これを「ライブ」で行うにはどうすればよいので、ウィンドウを最小化すると幅が変化しますか?

4

2 に答える 2

1

画像のサイズが既にわかっている場合 (ファイル名に表示されています)、それに応じてコンテナーの幅を事前に設定し、CSS を中央に配置する方が効率的です。何らかの理由でこれが不可能であると仮定すると、画像が読み込まれるまで待ってから (ドキュメントの準備ができているだけでなく)、画像の幅を測定してください。

上記を考えると、ウィンドウのresizeイベントを処理できます。

function centerImages() {
    // center the images
}

//once the images have finished loading:
$(window).resize(centerImages);
centerImages();
于 2013-03-17T16:29:10.527 に答える
0

SOLUTION

$('.image-container').each(function(){
    var containerWidth=0;
    $(this).find('img').each(function(){containerWidth+=$(this).width();})
    $(this).width(containerWidth+'px');

    $(this).find('img').each(function () { 
        $(this).attr('style','');      
        $(this).width(Math.floor(($(this).width() / containerWidth) * 100) + '%');       
    });
});
$(window).resize(function(){
    $('.image-container').each(function () {
        var containerWidth = $('.image-container').width();
        var resizeWidth = containerWidth;
        var resizeWhen = '350';
        var documentWidth = $(window).width();

        if (resizeWhen > documentWidth){
            $(this).width(100+'%');
        } else {
            $(this).width(resizeWidth);
        }
    });
});
于 2013-03-19T11:40:30.567 に答える