各行が同じ高さで幅が異なる可能性のある任意の数の画像である画像のグリッドを作成したいと考えています。また、ブラウザの幅が変わると、全体が拡大縮小する必要があります。
これまでに思いついた最善の解決策は次のとおりです。
<div id="root">
<div><img src="img/r1a.jpg" style="max-width:33.334%; min-width:33.333%;"/><img src="img/r1b.jpg" style="max-width:33.334%; min-width:33.333%;"/><img src="img/r1c.jpg" style="max-width:33.334%; min-width:33.333%;"/></div>
<div><img src="img/r2a.jpg" width="50%"/><img src="img/r2b.jpg" width="50%"/></div>
<div><img src="img/r3a.jpg" style="max-width:33.334%; min-width:33.333%;"/><img src="img/r3b.jpg" style="max-width:33.334%; min-width:33.333%;"/><img src="img/r3c.jpg" style="max-width:33.334%; min-width:33.333%;"/></div>
<div><img src="img/r4a.jpg" width="100%"/></div>
<div><img src="img/r5a.jpg" style="max-width:43.733%; min-width:43.732%;"/><img src="img/r5b.jpg" style="max-width:25.584%; min-width:25.583%;"/><img src="img/r5c.jpeg" style="max-width:30.686%; min-width:30.685%;"/></div>
<div><img src="img/r6a.jpg" style="max-width:33.861%; min-width:33.860%;"/><img src="img/r6b.jpg" style="max-width:16.480%; min-width:16.479%;"/><img src="img/r6c.jpg" style="max-width:33.184%; min-width:33.183%;"/><img src="img/r6d.jpg" style="max-width:16.480%; min-width:16.479%;"/></div>
<div>
そしてCSS：
#root {
max-width:1480px;
margin:0 auto;
}
#root div {
white-space:nowrap;
}
#root div img {
padding:0;
margin:0;
padding-right:4px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
これに関する主な問題は、同じ行の画像の幅が異なる場合、それらの高さがすべて同じではなく、パディングが不均一であるため見栄えが悪いことです。すべての画像がまったく同じサイズである場合、または CSS で padding-right を 0 に設定した場合、問題なく動作します。
これに関するもう 1 つの問題は、各画像のパーセンテージを計算する必要があり、少し時間がかかることです。
もう 1 つの問題は、画像の下部に 4 ピクセルのパディング/マージンがあり、それを取り除くことができないことです。
これを行う最善の方法は何ですか？これらの問題のいくつかを修正するために行うことができるわずかな変更はありますか、それとも完全に異なる構造を使用する必要がありますか?
上記のコードが生成するもののスクリーン ショットを次に示します。
2 行目の画像の高さがすべて同じではないことがわかります。