safari(ios)で画像が伸びてしまった時の対処法

問題のコード

HTML

<div class="flex">
  <img src="img.png" alt="">
  <p>テキストテキストテキストテキストテキスト</p>
</div>

CSS

.flex {
  display: flex;
}

.flex > img {
  width: 100%;
}

原因

flexboxの子要素に<img>を入れてしまうと、safari(ios)で画像が伸びてしまうようです。

対処法

対処法① ： HTMLを修正する

<img>を<div>囲い、flexboxの孫要素になるよう修正する。

<div class="flex">
  <div>
    <img src="img.png" alt="">
  </div>
  <p>テキストテキストテキストテキストテキスト</p>
</div>

対処法② ： CSSを修正する

flexboxに「align-items: flex-start;」を設定する。

.flex {
  display: flex;
  align-items: flex-start;  ⇦ 追加
}

.flex > img {
  width: 100%;
}

まとめ

デザインの都合で「align-items: flex-start;」を設定できない場合があると思うので、対処法①で対処しておけば間違いないかと思います。
（無駄なタグを追加したく無いですが、致し方ないですね。。）

パッと見では気づかなかったが、よく見たら画像が少し伸びていたなんてことも過去にあったので、safari(ios)でのチェック時は画像に崩れがないか入念に確認するようにしたいと思います。