css - 当浏览器尺寸减小时，只有第一张图像留在视图中

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/