ときどき、Chromeの検証ツールでは問題なく表示されているのに、実機iPhoneで画像が伸びて表示されてしまうことがありました。そんな時の解消方法と未然に確認する方法をメモします。
flexboxを使うと画像が伸びる
原因はflexboxにあるようでした。
「align-items: flex-start;」のcssを1行追記するだけで解決できるようです。
.flex{
display: flex;
align-items: flex-start;
}
Safariで事前に確認可能
この画像が伸びる問題、PCのSafariでも同様に起こるようです。
実機で確認する前にSafariで確認してみるのもおすすめ。