自動調整圖像大小，使其適合 window

Question

我有一個只有一堆圖像的頁面。 沒有其他的。

我想根據瀏覽器 window 的大小調整和減少/增加一行中的圖像數量。

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

imgSize = documentWidth/18;

使用我的瀏覽器 window (1770px)，這會在一行上生成 18 張圖像，寬度為 98.3px。 但是如果用戶 window 比我的小很多，比如說 962px，那么圖像的寬度將是 53.4px，這太小了。 我希望它們在 100 像素左右。

因此，如果 window 大小為 X 並且圖像不能大於 120 像素且小於 80 像素，我需要計算一行可以容納多少張圖像。

Answer 1

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

Answer 2

響應式設計解決了您正在嘗試做的事情。 您可以根據 window 的寬度使用媒體查詢來指定不同數量的列 - 這是通過為圖像提供百分比寬度來完成的。 然后你可以給圖像一個最小寬度和最大寬度來限制它們的實際尺寸。