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