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

解决方案

$('.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 回答