Изменение размера группы изображений в соответствии с контейнером, все с одинаковой высотой

Question

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

Изображения могут быть разных размеров.

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

HTML структура может выглядеть следующим образом: http://jsbin.com/uhonaz/2/

Благодарности

Answer 1

Это можно сделать с помощью CSS, как это:

img{ 
    height:100%; 
    width:auto; 
} 

если вы хотите четыре изображения для размещения на одной и той же линии, вы можете сделать это:

img{ 
    height:100%; 
    max-width: 25%; 
    width: auto; 
} 

Для неопределенного количества изображений, попробовать JavaScript (я использую JQuery):

width = 100/$('img').length; 
$('img').css('max-width', width + '%');