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

Question

我有一个画廊，只是一堆图像的页面。没有其他的。

我想调整大小并减少/增加一行中的图像数量，具体取决于浏览器窗口的大小。

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

imgSize = documentWidth/18; 

通过我的浏览器窗口（1770px），这样可以在一行上产生18幅图像，宽度为98.3px。 但是，如果用户窗口比我的小很多，比如说962px，那么图片宽度将是53.4px，这是很小的。 我想要他们约100px。

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

Answer 1

将窗口大小除以80并向上取整。

Answer 2

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