html - 将响应图像彼此相邻堆叠

Question

问题很简单，我想知道如何实现这样的目标:

但我希望图像能够响应(例如最大宽度:100%；高度:自动；)而不是将它们堆叠在一起，明白了吗？无论屏幕的分辨率如何，我都希望它们缩放得更小或更大。

例如，如果分辨率更大:

或者如果它更小:

我希望图像适合 100% 的屏幕宽度，我该怎么做？

Answer 1

如果您知道图像的数量，您刚刚设置了一个等于 100% 的百分比:

img{
   float: left;
   width: 20%;
}

FIDDLE

如果您不知道图像的数量，您可以使用一些简单的 jquery 来查找数量并根据数量设置宽度:

var imgCount = $("img").length;
$("img").css({"width":(100/imgCount)+"%"})

FIDDLE