Edited at

CSS3 Flexbox内の画像の比率がおかしい?件

More than 1 year has passed since last update.

皆様、おはこんばんちわ。

今回は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などいつも通りのやり方で調整してあげればいいかと。

それでは、これからもどうぞよろしくお願い致します。