iPhoneのsafariで画像が縦長に伸びてしまう問題がalign-items:flex-startで解消しない場合の対処

レスポンシブレイアウトのウェブサイト制作の際、PCのブラウザによるスマートフォンでのエミュレーションでは問題無いが、実機のiPhoneで閲覧した時に画像の縦横の比率が正しくなく、縦に伸びている現象が発生することがあります。

発生条件

私は下記のようなレイアウトで確認しています。

• display:flexを指定した親要素の子要素として画像を配置する。
• PCレイアウトではflex-directionはrow（横並び）だが、モバイルレイアウトではcolumn（縦並び）にする。
• 画像の幅は親要素内の幅100%で、高さは自動（auto）とする。
• 画像にはpaddingによって左右に余白が指定されている。

HTML

<div>
  <img src="foo.png" alt="bar">
  <p>ほげほげ<p>
<div>

CSS(scss)

div {
  display: flex;
  flex-direction: row;
  img {
    padding: 0 20px;
  }
}

@media screen and (max-width: 768px) {
  div {
    flex-direction: column;
    img {
      width: 100%;
      height: auto;
    }
  }
}

対処方法

このような問題の対応方法について検索したところ、「flexを指定している親要素にalign-item:flex-startを指定しましょう」という文献が大量にヒットしましたが、解決出来ませんでした。

今回の場合は、下記のように修正することで解決しました。

CSS(scss)

@media screen and (max-width: 768px) {
  div {
    flex-direction: column;
    img {
      width: calc(100% - 20px * 2); /* 幅から左右の余白分を引いた幅を指定する */
      height: auto;
      padding: 0; /* paddingによる左右の余白は0にする */
    }
  }
}

推測される原因

ブラウザのバグか仕様か分かりませんが、幅は確かに余白を考慮された長さになっているものの、高さが自動計算される際に、画像左右の余白が無視されて親要素の幅一杯まで広げた時の長さが参照され、結果的に縦横の比率が崩れた大きさの画像が表示されてしまうと思われます。