JQuery отзывчивой ширины настройки DIV

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, ширина ширины .image составляет 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); 
     } 
    }); 
});