【解決方法】iPhoneで見ると画像が縦に伸びてる。Chromeの検証では問題ないのに…

【解決方法】Chromeのデベロッパーツール「検証」で端末フレームをiPhoneにして画像比率に問題がないことを確認。...が、iPhone(実機)で見ると画像が縦に伸びてる。

つい先日起こって焦ったこと。

それは、画像の見え方(比率)が「Chromeデベロッパーツールの検証画面」と「iPhoneの画面」で違うこと。

ぼく
iPhone(11 Pro / SE2)で見ると、画像がめっちゃ縦に伸びてたんですよね….

起こったこと

【解決方法】Chromeのデベロッパーツール「検証」で端末フレームをiPhoneにして画像比率に問題がないことを確認。...が、iPhone(実機)で見ると画像が縦に伸びてる。

他の箇所(画像)ではなっていないのに…なんでや…と頭の中がコンフューズしましたが、先輩から即座に解決策を提示してもらいました。(過去同様のケースに見舞われたらしい)

解決策は単純で、「display:flex;」を指定している箇所に、「align-items: flex-start;」を追記するだけ。

これで画像が通常の比率に戻ります。

解決方法の詳細

HTML
<div class=”content”>
   <img src=”bnr1.jpg” alt=”初期費用半額”>
   <img src=”bnr2.jpg” alt=”3ヶ月無料”>
<div>

CSS

.content{
   display:  flex;
   flex-wrap: wrap;
   align-items:  flex-start;
}

.content img{
   max-width: 100%;
   height: auto;
}

ぼく
赤字が追記したコードになります。

これで、「検証画面」と「実機」による見た目の違いは出ない筈。

【解決方法】「display:flex;」を指定している箇所に、「align-items: flex-start;」を追記

あくまで一(いち)参考例となります。

そんな感じで。終わりッ!!

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください