皆様、おはこんばんちわ。
今回はCSS3のFlexboxで少しハマったことについてご紹介致します。
とあるゲームサイトのコーディングでFlexboxを使用する機会がありました。
Flexboxを使用するとその中に内包してあるimgが伸び縮みする際、比率がおかしくなってしまう現象がおきてしまいました。
そんなときは、
<div class="flexbox">
<img src="画像のパス" alt="">
</div>
↓
<div class="flexbox">
<div class="flexbox_in">
<img src="画像のパス" alt="">
</div>
</div>
という感じで、Flexboxをかけている要素の中にもう一個divを入れ込んであげればいいです。
そんで、img要素に対して、widthやmax-widthなどいつも通りのやり方で調整してあげればいいかと。
それでは、これからもどうぞよろしくお願い致します。