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

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