调整图像组的大小以适合容器，所有图像都具有相同的高度

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 + '%');