自動調整圖像大小，使它們適合窗口

Question

我有一個畫廊，只是一堆圖像的頁面。沒有其他的。

我想調整大小並減少/增加一行中的圖像數量，具體取決於瀏覽器窗口的大小。

現在我有一個固定的數字，如果每行的圖像。

imgSize = documentWidth/18; 

通過我的瀏覽器窗口（1770px），這樣可以在一行上產生18幅圖像，寬度爲98.3px。 但是，如果用戶窗口比我的小很多，比如說962px，那麼圖片寬度將是53.4px，這是很小的。 我想要他們約100px。

因此，如果窗口大小爲X，並且圖像不能大於120像素且小於80像素，則需要計算一行中適合的圖像數量。

Answer 1

將窗口大小除以80並向上取整。

Answer 2

Responsive design解決您正在嘗試做的事。您可以使用媒體查詢根據窗口的寬度指定不同數量的列 - 這是通過爲圖像提供一個百分比寬度來完成的。然後你可以給圖像一個最小寬度以及最大寬度來約束它們的實際尺寸。