自动调整图像大小，使其适合窗口

Question

我有一个图库，只有一堆图像。没别了。

我希望根据浏览器窗口的大小调整大小并减少/增加一行中的图像数量。

现在，如果每行图像，我有一个固定的数字。

imgSize = documentWidth/18;

使用我的浏览器窗口（1770px），一行产生18幅图像，宽度为98.3像素。 但是如果用户窗口比我的小很多，那就说962px，图像的宽度是53.4px，这是小的。 我想要它们大约100px。

因此，如果窗口大小为X且图像不能大于120px且小于80px，我需要计算一行中适合的图像数量。

Answer 1

将窗口大小除以80并向上舍入。

Answer 2

Responsive design解决了您要做的事情。您可以使用媒体查询根据窗口的宽度指定不同数量的列 - 这是通过为图像指定百分比宽度来完成的。然后你可以给图像一个最小宽度和最大宽度来约束它们的实际尺寸。