質問: 不揃いの画像を縦積みにして複数配置し、下記のように表示させたいと考えております。 ・画像と画像の間は20px固定で余白を入れる ・横サイズは最大300pxで表示 ・縦サイズは最大200pxで表示 内接リサイズを使って実現できないかと試してみましたが「max-width」と「max-height」だと、画像サイズが親要素よりも大きい場合に画像が親要素からはみ出してしまいます。 しかし、「width」と「height」だとウィンドウサイズが変わった時に幅が固定されてしまいウィンドウからはみ出してしまいますし、画像の縦サイズが親要素の指定よりも小さい場合には「画像と画像の間は20px開ける」が実現できません。 (20pxよりも大きく開いているように見えてしまいます) ``` .image { max-width: 300px; max-height: 200px; margin-bottom: 20px; } .image img { width: auto; height: auto; max-width: 100%; max-height: 100%; } ``` 対象ブラウザはie9以上、他ブラウザは最新版(iphone/android含む)でこのような見た目をcssのみで実現することは可能でしょうか? もしcssのみでの実現が難しい場合にはjsなどを用いれば可能でしょうか? 何卒よろしくお願いいたします。 【現状】 ![現状](https://teratail.storage.googleapis.com/uploads/contributed_images/7751f512bf3db54759e1ed53e5fc3a9d.jpeg) 【表示させたいイメージ】 ![表示させたいイメージ](https://teratail.storage.googleapis.com/uploads/contributed_images/1d4a7f49f2fdaa2eb6e2e378811d3e69.jpeg)
回答: 高さが固定すれば良いわけなので、`vw` で指定してしまうとか。 ``` .image { text-align: center; margin: 20px auto; } .image img { max-width: 40vw; max-height: 28vw; } ``` **動くサンプル:** 【[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法 | コリス】