jQuery динамический пропорциональный элемент/изменение размера изображения

Question

Я пытаюсь изменить размер изображений пропорционально их содержащим элементам, единственная проблема заключается в том, что я изо всех сил пытаюсь увеличить высоту каждого контейнера изображения пропорционально его изменению ширины при изменении размера окна, ширина каждого контейнера изображения равна 25% от ширины основного контейнера.

Теперь мне нужно, чтобы каждый контейнер изображения изменял размер пропорционально, когда изменяется размер окна, и чтобы каждое изображение внутри его соответствующего контейнера расти вместе с ним, но сохраняйте его соотношение сторон.

Вот что у меня есть, http://jsfiddle.net/pPWVd/.

Answer 1

Я изменил вашу скрипку (http://jsfiddle.net/pPWVd/5/), чтобы отразить идею того, что вы описываете. Ключом к поддержанию пропорции является установка только одного измерения (ширина или высота). Кроме того, я установил отображение item в block, так как он получает width и плавает.

В зависимости от вашей ситуации вам действительно не нужны дополнительные обертки div, чтобы получить эффект, см. http://jsfiddle.net/pPWVd/7/. Хотя, если вы ставите другие вещи в item, тогда вы захотите сохранить его так, как вы его.