iOSのSafariでflex表示の画像が縦に伸びる問題の解決方法

問題の発生

iOSのSafariブラウザでは、displayプロパティにflexを指定した画像が縦に伸びてしまう問題が発生します。

解決方法

この問題を解決するためには、flexコンテナに対して ‘align-items: flex-start;’ を指定します。これにより、flexコンテナ内のアイテム(ここでは画像)はコンテナの上端に配置され、伸縮せずに元の大きさを保つことができます。

.your-flex-container {
  display: flex;
  align-items: flex-start;
}

以上のように設定することで、iOSのSafariでflex表示の画像が縦に伸びる問題を解決することができます。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

上部へスクロール