Question

我为代码创建了一个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 width设置为100％。

但这只会在重新加载/更新页面时发生。

我的问题是：如何“实时”完成，所以宽度随着我最小化窗口而改变？

Answer 1

如果您已经知道图像的尺寸（我在文件名中看到它们），那么相应地预先设置容器宽度并以CSS为中心会更有效。假设由于某些原因这是不可能的，请确保等到图像加载后（不仅仅是文档准备好），以测量它们的宽度。

鉴于上述情况，您可以处理窗口的resize事件：

function centerImages() {
    // center the images
}

//once the images have finished loading:
$(window).resize(centerImages);
centerImages();

Answer 2

解

$('.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);
        }
    });
});

jQuery响应设置div的宽度

2 个答案: