htmlページのイメージを利用可能な数の列にスタックします

Question

私のHTML/CSS/JSのハードルのもう一つ。

私は私はこのようなページに収まるように必要な12枚の写真があります：彼らは（おそらくこれ以上4以下）

彼らはすべて埋めるためにストレッチする必要があり、できるだけ多くの列を取る必要があります

• を空き容量（ある列がある場合、画像の幅は100％、2つの場合は50％、3つの場合は33％など）
• 画像が下に来ると、一定の大きさ。

このコードではいくつかの問題がありますが、それをカットするものではありません。画像は、3列以下の場合にのみ利用可能な領域をすべて埋めます。最小サイズは160pxです。 Operaを使ってページをズームしてもうまくいきません。

img.photoGallery { 
    min-width: 160px; 
    max-width: 32%;  
    float: left; 
} 

テーブルではこれを行うことはできません。 CSSもそうではないようです。私はおそらくJavaScriptに頼るつもりですが、私はそれに頼るのが嫌です。だから私は知らないトリックがあり、それは私を助けることができますか？

Answer 1

"max-width：32％"ではなく、 "width：100％"を入力するとどうなりますか？画像をコンテナの幅に合わせるには、幅を100％とします。しかし、私はあなたのレイアウトを適切に視覚化することができないので、これはあなたが探しているものではないかもしれません。