Q&A
各画像のサイズや縦横比はどうなってますか。
同じならCSSだけでなんとかなりそうですが、まちまちだと難しそうです。
やりたいこと
あるコンテナ要素以下に複数枚（可変）のimgが入っていたとして、それらを
・高さを一致させて
・横幅は合計が親要素の100%になるように
CSSを書くことは可能でしょうか。
個別に数値を計算して入力をしない、方法を探しています。
具体的には
html
1<div> 2<div><img/></div> <!-- 画像が1枚の場合はそれが親要素の100%に --> 3<div><img/><img/></div> <!-- 画像が複数枚の場合は高さを一致させつつ、マージンをとって、合計が親要素の100%に --> 4<div><img/><img/><img/></div> 5<div><img/><img/></div> 6</div>
↑このような構造が
↓こうなるといいなと思っています。
JSなどで全部計算したり、画像に応じて手動で適切なスタイルを設定し分ければできるとは思いますが、そうではなく動的に変わっても大丈夫なようにしたいです。
flexboxでできそうだな、と思ったのですが、うまくできず。
お知恵をお借りしたいです。
サイズや縦横比は固定ではなく動的に様々になる想定です。
ありがとうございます、そういう場合は難しいのですね。
JSで個別に計算して適用することにします。
あなたの回答
tips
プレビュー
