iPhoneだと画像が縦に伸びてしまう現象（Chromeデベロッパーツールだと正しく表示される）

2834 ワード
画像 HTML Chrome Bootstrap iPhone HTML テキストリンク

iPhoneで画像が縦にのびーんとなってしまった

bootstrap使ってwebページ制作で起きた出来事

初心者なので理由がわからず苦労したのでメモ

bootstrapのグリッドシステム初挑戦で楽やなーーーと思ってたら悲惨な目に合いました

以下コード


<div class="container">
 <div class="row justify-content-center">
  <h3 class="col-11">人脈を可視化</h3>
  <img class="col-11 img-fluid" src="./縦のび画像.png">
 </div>
</div>

chromeのデベロッパーツールでiPhoneサイズの確認してきちんと表示されていたので問題ないと思って、いざ検証用サーバーにアップしてiPhoneで確認すると、、、

あれっ！！？？？。伸びてる？？

やばいっ納期がっ！！

いろいろ調べてみると、、、

iPhone特有の Flexbox の不具合とのこと。親要素をmax-height、min-height、auto 、パーセンテージなどのみで設定した場合、子要素の高さが認識されない場合があるそう。今回もbootstrap使っているので同じような不具合みたい。

そこでrowの子要素にimg col持ってこずに、いったんdivでcol挟んでからのimgにしてみると、


<div class="container">
 <div class="row justify-content-center">
  <h3 class="col-11">人脈を可視化</h3>
  <div class="col-11">
   <img src="./縦のび画像.png" class="img-fluid">
  </div>
 </div>
</div>

うまく表示されました！！

rowの子にimg colではなく、
子にdiv col、孫にimgとしなければならないということです。

初心者のみなさんは気を付けましょう

参考