問題の発生
iOSのSafariブラウザでは、displayプロパティにflexを指定した画像が縦に伸びてしまう問題が発生します。
解決方法
この問題を解決するためには、flexコンテナに対して ‘align-items: flex-start;’ を指定します。これにより、flexコンテナ内のアイテム(ここでは画像)はコンテナの上端に配置され、伸縮せずに元の大きさを保つことができます。
.your-flex-container {
display: flex;
align-items: flex-start;
}
以上のように設定することで、iOSのSafariでflex表示の画像が縦に伸びる問題を解決することができます。