イメージは自動的にサイズ変更され、ウィンドウに収まるように調整されます

Question

ギャラリーがあります。他に何もない。

そして、ブラウザウィンドウのサイズに応じて、行のイメージ数を減らしたり、サイズを変更したりしたいとします。

今は1行あたりの画像数が固定されています。

imgSize = documentWidth/18; 

ブラウザウィンドウ（1770px）では、1行に98.3px幅の画像が18個生成されます。 しかし、ユーザーのウィンドウが私のものよりもかなり小さい場合は、962pxとしましょう。画像の幅は53.4pxと小さくなります。 私はそれらを約100pxしたい。

したがって、ウィンドウのサイズがXでイメージが120ピクセルより大きく80ピクセルより小さくならない場合、1行に収まるイメージの数を計算する必要があります。

Answer 1

ウィンドウサイズを80で割って切り上げます。

Answer 2

Responsive designは、あなたが何をしようとしているのかを示します。メディアのクエリを使用して、ウィンドウの幅に応じて異なる数の列を指定します。これは、画像にパーセンテージの幅を与えることによって行われます。次に、実際のサイズを制限するために、イメージに最小幅と最大幅を与えることができます。