%とcalcで画像flexboxレスポンシブ対応。 - Qiita

画像コンテンツのレスポンシブ対応をする際に、コンテナのサイズ計算で考えてしまうのでメモようにまとめてみました。 完成イメージ イメージ的にはこんな感じです。 サイズがバラバラな画像を、CSS同じサイズにして、さらに画像間の余白も計算に入れたサイズにします。メリットとしてはツール等で画像のトリミングが不要になるのと、余白調整でlast-childとか特殊な指定がなくなります。 コード <h2>横に並べただけ。画像のサイズ調整なし。画像間は10px</h2> <div class="flex-wrap1"> <div class="box"><p><img src="./img/modal1-lg.jpg"></p></div> <div class="box"><p><img src="./img/modal2-lg.jpg"></p></div> <div class="box"><p><