スマホでホームページを見ると、
「画像が画面からはみ出してしまう」
「一部が切れて表示される」
「レイアウトが崩れてしまう」
こんな悩みはとても多いです。
パソコンではきれいに見えるのに、スマホだけおかしくなるケースはよくあります。
そこで、この記事では、初心者の方でもすぐできる画像サイズの直し方を分かりやすく解説します。
パソコンだけでなく、スマホでもきれいにホームページを見れるようにすることが必要であるため、ぜひ最後までお読みください。
スマホで画像トラブルが起こる主な原因
まずは、「スマホで画像トラブルが起こる主な原因」からお伝えします。
画像サイズを固定している
よくあるのが、
img {
width: 600px;
}のように幅を決めているケースです。
パソコンでは問題なくても、スマホでは画面に収まらなくなってしまいます。
高さを指定している
たとえば、
img {
height: 300px;
}のように高さを固定すると、
画像がつぶれたり切れたりします。
背景画像の設定が原因になっている
背景画像に、
background-size: cover;を使っていると、スマホでは一部が切れることがあります。
まず確認したい基本ポイント
次に、「確認したい基本ポイント」をご紹介します。
widthやheightが固定になっていないか
widthやheightが、px指定になっていたら、まずは見直しましょう。
px指定で数字が固定されていたら、スマホでは画像がはみ出してしまいます。
スマホ表示で必ず確認する
パソコンだけでなく、スマホ画面でチェックすることがとても大切です。
スマホでの表示を確認するには、実際にスマホでホームページを確認することが一番です。
すぐできる基本の直し方（初心者向け）
それでは、「すぐできる基本の直し方」をお伝えします。
画像を自動で縮小させる方法
まずはこの設定を入れてください。
img {
max-width: 100%;
height: auto;
}画面サイズに合わせて、画像が自動で調整されます。
高さを自動にする
高さ指定がある場合は削除して、自動調整にしましょう。
背景画像が切れるときの対処法
「背景画像が切れるときの対処法」をお伝えします。
coverとcontainの違い
- cover：画面いっぱいに広げる（一部切れることがある）
- contain：画像全体を表示する（余白が出ることがある）
切れたくない場合は、
background-size: contain;を試してみましょう。
画像をきれいに見せるコツ
スマホで、画像をきれいに見せるコツをご紹介します。
最大幅を指定する
大きくなりすぎる場合は、
img {
max-width: 600px;
}などで調整できます。
余白を調整する
画像の上下に余白を入れると、見やすくなります。
よくある失敗例（スマホで画像が大きすぎる・切れるとき）
画像トラブルを直そうとして、逆に見づらくしてしまうケースもよくあります。
ここでは特に多い失敗を紹介します。
無理に小さくして画質が悪くなる
「大きすぎるなら小さくすればいい」と思い、
画像そのものを極端に縮小してアップし直す人が多いです。
その結果、スマホではぼやけて表示されたり、
文字が入った画像の場合は読めなくなってしまいます。
サイズはCSSで調整する方がきれいで安全です。
高さを固定したままにしてしまう
画像が切れているのに、
height: 300px;のような指定をそのまま残しているケースはとても多いです。
高さが固定されていると、
どれだけ幅を調整しても切れ続けてしまいます。
画像は基本的に高さは自動調整にするのが正解です。
背景画像の設定をそのまま放置する
背景画像で見切れているのに、background-size: cover;を使い続けているケースもよくあります。
「画面いっぱいにしたい」という理由で使われますが、
スマホでは切れやすくなります。
用途によってはcontainに変えるだけで解決します。
パソコンだけで確認して安心してしまう
パソコンで見て問題なかったので、そのまま公開してしまい、
スマホで見ると大きく崩れていることに後から気づく人も多いです。
画像調整は必ずスマホ表示で確認する習慣をつけましょう。
まとめ｜画像は自動調整が基本
「スマホで画像が大きすぎる・切れるときの調整方法」の記事はいかがでしたでしょうか？
スマホで画像が大きすぎたり切れたりする原因のほとんどは、
- サイズ固定
- 高さ指定
- 背景画像設定
です。
まずは、
✔ max-width:100%
✔ height:auto
を設定するだけで、ほとんど改善できますよ。
ぜひ試してみてくださいね！
