プログラミング・エンジニア転職

flexboxで横並びにした画像がスマホ(iPhone)のsafariだと縦に伸びる原因と対策

縦の伸びた画像

flexboxで画像を横並びにしたところ、タイトル画像のように画像が縦に伸びるという現象が起きました。

問題が起きた当時の状況としては、

  1. パソコン上でブラウザのサイズを変えてデザイン確認を行った
  2. 問題なかったので、GitHubで静的ページを公開した
  3. その後、自分のスマホで確認したところ、画像が縦に伸びていた

こんなかんじです。

「パソコンでブラウザのサイズを変えて確認したんだけどな…」と思いつつ、ググったら原因が分かったのでまとめます。

問題が起きたコード

問題が起きたときのコードとしては、

<div class="gallery">
  <img src="" alt="写真" class="photo">
  <img src="" alt="写真" class="photo">
  <img src="" alt="写真" class="photo">
</div>
.gallery{
  display: flex;
}

.photo{
  width: 30%;
}

こんなかんじです。

見てもらえば分かりますが、

  • 親要素(div)にflexboxを指定した
  • 子要素(img)に画像を入れて、サイズ指定(30%)を行った

こんな内容です。

画像が縦に伸びた理由

デザインが崩れた原因をググってみると、

「flexboxの仕様上、子要素に直接画像を入れると、スマホ版のsafariでは画像が縦に伸びる」

ということらしいです。

画像が縦に伸びる場合の解決策

こういった場合の対応としては、

  1. 画像をdivで囲う
  2. 画像を囲ったdivにサイズ指定(今回の場合なら30%)を行う
  3. その上で、画像自体には100%のサイズ指定を行う

こんなことが効果的だそう。

ソウ

つまり、画像がflexboxの孫要素になるように直す必要があるってことです

なので…

<div class="gallery">
 <div class="photo-wrapper">
  <img src="" alt="写真" class="photo">
 </div>
 <div class="photo-wrapper">
  <img src="" alt="写真" class="photo">
 </div>
 <div class="photo-wrapper">
  <img src="" alt="写真" class="photo">
 </div>
</div>
.gallery{
 display: flex;
}

.photo-wrapper{
 width: 30%;
}

.photo{
 width: 100%;
}

こんなかんじに修正したところ、無事にデザインも修正されました。

まとめ

flexboxは今回のバグ以外にも、いくつかバグが起きるポイントがあるみたいですね。

「複数ブラウザでのチェックは必須だよ~」と聞いたことがありますが、まさにそのことを痛感した出来事でした。