スマホで画像が大きすぎる・切れるときのレスポンシブ調整方法

パソコンではきれいに表示されているのに、スマホで見ると画像が大きすぎたり、
途中で切れてしまったりすることはよくあります。

実際に、画像が原因で横スクロールが出てしまうケースも少なくありません。

そこで、この記事では、スマホで画像が崩れる原因と、すぐできるレスポンシブ調整方法を初心者向けに解説します。

スマホでホームページを見るときに、横スクロールが出てしまうと、とても見づらくなってしまうので、ぜひ確認してみてくださいね！

スマホで画像トラブルが起こる主な原因

まずは、よくある原因を確認していきましょう。

原因① 画像サイズが固定されている

以下のようにpxで指定していると、スマホ画面より大きくなってしまいます。

img {
  width: 500px;
}

この状態だと、スマホで確実にはみ出します。

原因② 親要素より画像が大きい

画像を入れているdivの幅よりも、画像のサイズが大きいとレイアウトが崩れます。

特に固定幅レイアウトからスマホ対応にした場合によく起こります。

原因③ CSSで拡大されている

まれに、

transform: scale(1.2);

などで画像が拡大されていることもあります。

原因④ レスポンシブ設定が入っていない

viewport設定やスマホ用CSSが入っていないと、正しく縮小されません。

まずはこれだけで直る基本調整（最重要）

ほとんどのケースは、次の1行で解決します。

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

なぜこれで直るのか？

つまり、画像がはみ出さなくなります。

切れてしまうときの対処パターン別の解説

次は、切れてしまうときの対処について、解説していきます。

横幅オーバー型の直し方

親要素に幅指定を入れましょう。

.container {
  width: 100%;
}

固定幅が原因ならこれで改善します。

高さ固定型の直し方

高さを固定している場合は削除します。

img {
  height: auto;
}

これだけで自然なサイズになりますよ。

背景画像型の直し方

背景画像を使っている場合は以下がおすすめです。

background-size: cover;
background-position: center;

画面に合わせてきれいに表示されます。

よくある間違いと注意点

次の設定だけだと、うまく直らないことがあります。

必ず「max-width」と「height:auto」をセットで使いましょう。

スマホできれいに表示させるためのチェックポイント

調整後は次を確認してください。

もちろん、スマホ実機で見るのが、一番確実な方法ですよ。

まとめ

「スマホで画像が大きすぎる・切れるときのレスポンシブ調整方法」の内容はいかがでしたでしょうか？

スマホで画像が大きすぎる・切れる問題のほとんどは、

これだけ覚えておけば大丈夫です。

まずは基本設定を入れて、きれいに表示されるか確認してみてくださいね！