iPhoneだとflexboxで画像が縦に伸びる問題【CSS】

flexboxを使っていると画像が縦に伸びてしまう問題が起きたことがある方も多いと思います。

Chromeのデベロッパーツールでスマホでの見え方を確認していた際は特に問題なかったのに、iphoneによる実機検証をすると、画像が縦に伸びて、比率がおかしくなっていたなんてことも。

そういう時は、「display: flex;」を指定している要素に、「align-items: flex-start;」を追記する事で解決できます。

また、IE/Edgeで画像が縦に伸びてしまう場合は、画像に「flex-shrink: 0;」を指定すればOKです。