iPhone XSなどで画像が縦に伸びる！問題の解決方法

起こったこと

自分の場合は、お客様から 「iPhone XSで確認したら画像が伸びていた！」とご指摘が来ました。

こんな感じに。

自分のiPhone8で実機チェックしても問題なし。

もちろん、Chromeの検証では問題ないです…

解決方法

どうやら、画像で囲っているCSSで、 display:flex; がついているとき、 align-itemsを指定していないときに、画像が縦に伸びる現象が起きるようです。

以下のようにCSSを修正しました

li.list-image {
    display: flex;
    align-items: flex-end; //追加コード
}

//画像ははコード変えず
li.list-image img {
    width: 100%;
}

なぜ解決したのか？

align-itemsは以下のことを指定するCSSになります。

• align-items：縦軸基準のアイテムの配置方法

引用：https://webukatu.com/wordpress/blog/18613/

ちなみにalign-itemsの初期値はnormalです。 （これで問題は起きないと思うのが普通ですよね…）

なので、コンテナ内の要素の配置方法を指定してあげる必要があります。

align-itemsは、

• flex-start(フレックスコンテナ内の始端に配置)
• flex-end(フレックスコンテナ内の始端に配置)

のどちらかを指定してあげるのがいいと思います。

画像を囲っているタグにflexを使う時は、align-itemsも指定してあげるようにしてください！

こちらの記事が参考になりました！

• 【解決方法】iPhoneで見ると画像が縦に伸びてる。Chromeの検証では問題ないのに… https://nichiyogogo.com/image-looks-stretched/