jQuery получить динамическую ширину нескольких элементов при изменении размера браузера

Question

Название в значительной степени объясняет большую часть моего вопроса. Я предоставлю некоторый контекст.

У меня есть что-то вроде этого. (упрощенное)

<ul> 
<li><img src="image1.jpg"/></li> 
<li><img src="image2.jpg"/></li> 
<li><img src="image3.jpg"/></li> 
</ul> 

каждая ли черепица горизонтально. Как так:

[ ][ ][ ][ ] 

Так у меня уже есть этот сценарий, который растягивает изображение высоту и сохраняет соотношение сторон. Но теперь Мне нужен скрипт, который будет динамически получать ширину всех изображений (или li) даже после изменения размера браузера. Насколько я понимаю, мне нужно что-то вроде пузыря событий или делегирования какого-то рода. Я не знаю, как продолжить это путешествие в jQuery.

изображений ссылки на различные настройки браузера, я говорю о

Нормальная высота браузера

http://f.cl.ly/items/1O3w3M3l3b3a0z2B0U1w/image1.jpg

Снижение высоты браузера

http://f.cl.ly/items/3y3K38243J063J1U2f1P/image2.jpg

Answer 1

Вы должны вклиниться resize события:

$(window).resize(function(){ 
    $('li img').each(function(){ 
     console.log($(this).width()); 
    }); 
}); 

Если вы хотите, чтобы он также стрелять на странице загрузки, триггер resize событие себя:

$(window).resize(function(){ 
    $('li img').each(function(){ 
     console.log($(this).width()); 
    }); 
}) 
.resize(); 

Вот скрипка: http://jsfiddle.net/39JFQ/

---

Если вам нужна сумма всех шириной, используйте это:

$(window).resize(function(){ 
    var totalWidths = 0; 

    $('li img').each(function(){ 
     totalWidths += $(this).width(); 
    }); 

    console.log(totalWidths); 
}) 
.resize(); 

Вот скрипка для этого: http://jsfiddle.net/39JFQ/2/

---

Вы должны, очевидно, заменить селектор li img с чем-то более конкретным.

Answer 2

Вам нужно сделать обработчик события к событию окно изменения размера:

$(window).resize(function(){ 
    $('li').each(function(){ 
    var width = $(this).width(); 
    if(width > large){ 
     $(this).find('img').attr('src', 'largeImage.jpg'); 
    }else{ 
     $(this).find('img').attr('src', 'smallImage.jpg'); 
    } 
    }); 
}); 

Рассматривали ли вы медиа-запросы для этого? http://www.w3.org/TR/css3-mediaqueries/

Answer 3

У вас его есть? Почему бы просто не использовать responsive CSS так, чтобы изображения адаптации:

img { 
    width: inherit; /* This makes the next two lines work in IE8. */ 
    max-width: 100%; /* Add !important if needed. */ 
    height: auto; /* Add !important if needed. */ 
} 

и использовать ширину в процентах от их контейнеров.

Чтобы сделать это в jQuery, вам необходимо прикрепить обработчик к событию изменения размера.Используйте один из ways described here или пример, используя Response ниже. Я бы использовал $.data для хранения данных ширины.

Response.action(function() { 
    // Code in here runs on ready and on resize: 
    $.each($('img'), function() { 
     // Get width of element each element: 
     var currentWidth = $(this).width(); 
     // Store for access where you need it: 
     $.data(this, 'lastWidth', currentWidth); 
    });//each 
});//action 

См. Также: responsejs.com/labs/dimensions/.