Flexの子要素に画像を使ったらSafariを確認！画像の表示が変に伸びてしまった、表示崩れした場合の対処法について

こんにちは！

Web制作でフリーランスをしている「はやた」と申します。

主にコーディングを仕事にしています！

今回は、flexについて話をしたいと思います。

画像にflexを使ったら必ずSafariを確認

flexの子要素に画像を入れた場合、必ずSafariでの表示を確認しましょう。

なぜかというと、画像が縦・縦に伸びてしまう現象、表示崩れが起こるからです。

■Chromeで画像を表示します。

■次にSafariです。

ちょっと見にくいかもしれませんが、Safariの画像表示が変になってしまっています。

これ結構な頻度で出現する問題なので、コーディングをする方は絶対にSafariは確認しましょう！

それじゃあどうしてこんなことになってしまうのか、原因を見てみます。

画像が伸びてしまう原因は<img>タグにある

flexで画像が伸びてしまう原因の一つは、flexの子要素にそのまま<img>タグを入れていることにあります。

　
　<div class="flex">
   <img src="./img/img" alt="">
   <div class="text">
    <p>テキストテキスト</p>
   </div>
　</div>
　

つまり、これだと画像が変に伸びてしまう。

　
　<div class="mv-img">
   <div><img src="./img/img" alt=""></div>
   <div class="text">
    <p>テキストテキスト</p>
   </div>
　</div>
　

これなら大丈夫というわけです。

ただcssも書いてしまって、後から<div>をつけるのがめんどくさい場合もあります。

僕もそうでした。

なので、cssに書き加えるだけの解決策も書いておこうと思います！

cssで解決！一行付け加えるだけ！

わざわざ全てのflexの画像子要素<div>を付け加える解決策は、コーディングした量が多ければ多いほど非現実的です。

なので、flexの親要素、display:flex; の下の行にこれを付け加えてください。

　
　　align-items: flex-start;
　

これだけで大抵の場合は解決できます！

試してみてください！

これでも解決しないという方！

大丈夫ですもう一つ解決策があります！

それでも解決しない方は子要素にCSSを付け加える

さっきの方法で解決しなかった方は、親要素と子要素のCSSにそれぞれ下記を付け加えてみてください！

■親要素

　
　　height: auto;
　

■子要素（<img>）

　　align-self: flex-start;
　

まとめ

いかがでしたでしょうか？

画像が伸びてしまう現象、誰もが経験する問題だと思います！

iPhoneを持っている人でSafariを使用している人はまだまだ結構いるので、しっかりSafariに対応しなくてはなりません！

個人的には全てのブラウザをChromeに統一して欲しいのですが、、、

難しそうなので、最後に確認だけしっかりしましょうね！！

それでは読んでいただきありがとうございました！！