CSSで画像サイズを自動調整する方法｜スマホ対応の基本コード

ホームページを作っていると、

こんな悩みを持たれることもあると思います。

そこでこの記事では、初心者でもすぐ使える
CSSで画像サイズを自動調整する方法（スマホ対応の基本コード）を解説します。

画像サイズはCSSで自動調整できるので、ぜひ最後までお読みください。

CSSで画像サイズが崩れるよくある原因

まずは、CSSで画像サイズが崩れるよくある原因から見ていきましょう！

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

<img src="sample.jpg" width="800">

このような指定は、スマホでは画面からはみ出します。

スマホを想定していない

パソコンだけで作ると、画像が大きすぎることがよくあります。

HTMLだけで調整しようとしている

HTMLだけでサイズを決めると、柔軟に対応できません。

画像サイズを自動調整する基本の考え方

次に、画像サイズを自動調整する基本の考え方をお伝えします。

ポイントは、次の3つです。

• 親の幅に合わせる
• 大きくなりすぎないようにする
• 縦横比はくずさない

この考え方が大事ですよ。

一番基本のコード（必須）

それでは、一番基本のコードをお伝えします。

画像の自動調整で、まず入れておきたいのがこちらです。

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

なぜこれで自動調整される？

• max-width: 100%
  → 親要素より大きくならない
• height: auto
  → 縦横の比率を保つ

この2つの組み合わせで、スマホでもきれいに表示されます。

widthとmax-widthの違いを理解しよう

widthとmax-widthの違いについて、お伝えします。

似ているようで、動きが違います。

widthを使った場合

img {
  width: 100%;
}

親の幅いっぱいに広がります。
小さな画像も引きのばされる点に注意が必要です。

max-widthを使った場合（おすすめ）

img {
  max-width: 100%;
}

元のサイズを保ちつつ、大きいときだけ縮小されます。

初心者には、こちらが安心です。

スマホでもきれいに表示するための注意点

スマホでもきれいに表示するための注意点をお伝えします。

元画像が大きすぎる

元が極端に大きい画像は、表示が重くなります。

親要素が固定幅

親が width: 800px などだと、画像もはみ出します。

表やボックスの中の画像

表の中は、特にはみ出しやすいです。

画像が横にはみ出すときのチェックポイント

画像が横にはみ出すときのチェックポイントをご紹介します。

画像がはみ出たら、次を確認しましょう！

• CSSがちゃんと当たっているか
• 親の横幅が固定されていないか
• marginやpaddingが原因でないか

だいたいこの中に原因があります。

よくある失敗と直し方

よくある失敗と直し方をお伝えします。

HTMLでwidthを指定している

👉 HTMLの指定を消して、CSSにまとめます。

高さも固定している

img {
  height: 300px;
}

👉 縦横比がくずれる原因です。

1枚だけCSSが当たっていない

👉 classや指定の場所を確認しましょう。

初心者向け！画像サイズ調整まとめ（コピペ用）

最後に、初心者向けの画像サイズ調整のまとめをご紹介します。

基本設定（これだけでOK）

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

親に合わせたい場合

.image-box img {
  max-width: 100%;
}

まとめ

CSSで画像サイズを自動調整する方法｜スマホ対応の基本コードはいかがでしたでしょうか？

CSSで画像サイズを自動調整するポイントは、とてもシンプルです。

この設定を入れておくだけで、スマホ対応のトラブルはかなり減ります。

特に最近は、スマホでホームページを見る人がとても増えているので、
この記事でお伝えした設定は必ず入れるようにしてくださいね！