24
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-11-11

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で確認すると、、、

あれっ!!???。伸びてる??

![IMG_5600.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520231/5dd64020-8fed-8ea2-91f0-8d9ab8963003.jpeg)

やばいっ納期がっ!!

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

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>

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

IMG_5601.jpg

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

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

参考

https://sitest.jp/blog/?p=10883
24
18
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?