浏览器大小减少时，只有第一个图像保持在视图中

Question

我在div中水平放置了一系列图像。

目标是随着浏览器变小，图像也变小，因此它们都可见并保持内联。

目前，只有第一张图片会保持可见，而其他图片则不在视野范围内。 （虽然所有的图像都变小了。

这是JSFiddle：http://jsfiddle.net/KXGUM/

您会注意到，您使浏览器变小，图像会变小，但只有第一个会保留在视野中，其他的则必须向右滚动才能看到。

我希望它们仍然可见，这意味着它们都必须缩小。

CSS：

body{margin: 0 auto;}
#week-wrap {border: 1px solid #000; height: auto; white-space: nowrap; max-width: 100%; width: auto; }
img {max-width: 100%; height: auto; display: inline-block; width: auto;}

Answer 1

由于你有3个图像，它们的宽度应该是父容器的33％。 将您的100％更改为33％，它们全部在屏幕上并且在一行中。

img {max-width: 33%; height: auto; display: inline-block; width: auto;}

见这里：http://jsfiddle.net/KXGUM/1/