CSSで画像をレスポンシブ対応させる方法

Webサイトをスマートフォンやタブレットなど様々な画面サイズに対応させるには、画像のレスポンシブ対応が不可欠です。

この記事では、CSSを使って画像をレスポンシブ対応させる方法を、基本から応用までわかりやすく解説します。

なぜ画像のレスポンシブ対応が必要か？

レスポンシブデザインでは、画面サイズに合わせてレイアウトが変化します。

しかし画像サイズが固定されていると、以下のような問題が発生します。

• スマホ画面に収まりきらずはみ出す
• 画質が劣化して見づらくなる
• レイアウトが崩れる

このようなトラブルを避けるために、CSSで画像を柔軟に表示させる必要があります。

画像が画面からはみ出ないようにする

画像の横幅が大きいために、画面からはみ出てしまうことがあります。

それを解決するもっとも一般的な方法は、max-width: 100% を使うことです。

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

解説

• max-width: 100%：親要素の幅を超えないように制限します。
• height: auto：アスペクト比（縦横比）を保ったまま高さを自動調整します。

この指定をしておけば、画像は常に親要素の幅にフィットし、画面サイズが変わっても自然に縮小されます。

使用例

<div class="container">
  <img src="example.jpg" alt="サンプル画像">
</div>

.container {
  width: 80%;
  margin: 0 auto;
}

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

max-width: 100%;を指定することで、img要素は.containerの外にはみ出ないようになります。

srcset属性やsizes属性を使用する

CSSだけでなく、HTML側の工夫で画像の読み込みを最適化する方法もあります。

srcsetの例

<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 768w, small.jpg 480w"
     sizes="(max-width: 768px) 100vw, 768px"
     alt="レスポンシブ画像">

これは、画面の幅に応じて最適なサイズの画像を選んで表示する仕組みです。スマホでは軽い画像、PCでは高画質画像を表示できます。

srcset属性とは？

srcset 属性は、デバイスの画面サイズや解像度に応じて最適な画像を選択させるための属性です。複数の画像ファイルとそれぞれの幅やピクセル密度を指定することで、ユーザーに最も適した画像を配信できます。

使用例（画面幅に応じた画像切り替え）

<img 
  src="image-480.jpg" 
  srcset="image-480.jpg 480w, image-768.jpg 768w, image-1024.jpg 1024w" 
  sizes="(max-width: 768px) 100vw, 768px" 
  alt="レスポンシブ画像">

このように記述すると、ブラウザは端末の画面幅と解像度に応じて、最適なサイズの画像を自動で選びます。

• 480w や 1024w は画像の横幅（幅）を示します。
• ブラウザは、画面幅と sizes 属性の値を元に、最も適切な画像を選択します。

sizes属性とは？

sizes 属性は、srcset に指定した複数の画像候補の中からどのサイズの画像を使うかをブラウザに判断させるための指針です。

基本の構文

sizes="(メディアクエリ) 表示幅, (メディアクエリ) 表示幅, デフォルト幅"

例の解説

sizes="(max-width: 768px) 100vw, 768px"

• 画面幅が768px以下のとき： 画像は常にビューポートの幅（100vw）に表示される。
• それ以外（768pxより大きい場合）： 表示サイズは768px固定と仮定する。

sizes を省略した場合、ブラウザはデフォルトで実際の表示サイズが分からず、高解像度の画像を読み込む可能性があります。

特にモバイル通信環境での通信量削減や読み込み速度の最適化には、正しく設定することが重要です。

picture要素で画面サイズごとに画像を変える

srcsetではなく、picture要素で画面サイズに応じて画像を切り替える方法もあります。

<picture> 要素は、異なる画像フォーマットや画面サイズ・解像度に応じて表示する画像を切り替えるためのHTML要素です。

srcset 属性と似た働きをしますが、より柔軟で高度な制御が可能です。

特に以下のような場面で活躍します。

• WebP などの軽量フォーマットに対応した画像を提供したい
• 特定の画面サイズで異なるアスペクト比の画像を使いたい
• モバイル・タブレット・デスクトップそれぞれで異なる画像を出し分けたい

基本構文

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="レスポンシブ画像">
</picture>

各要素の説明は以下の通りです。

• <source>：条件に合致した場合に使う画像を定義します。上から順に評価され、最初に一致したものが選ばれます。
• type 属性：画像フォーマットを指定します。ブラウザが対応していない場合はスキップされます。
• <img>：フォールバック用の画像。すべての <source> に合致しなかった場合に表示されます。

メディアクエリと組み合わせた例

<picture>
  <source media="(min-width: 1024px)" srcset="desktop.jpg">
  <source media="(min-width: 600px)" srcset="tablet.jpg">
  <img src="mobile.jpg" alt="レスポンシブ画像">
</picture>

この例では、画面サイズに応じて以下のように画像が切り替わります。

• 1024px以上： desktop.jpg
• 600px以上かつ1024px未満： tablet.jpg
• 600px未満： mobile.jpg

picture要素のメリット

• フォーマット対応（WebP、AVIFなど）に柔軟
• レイアウト最適化（画面サイズごとの構図変更）が可能
• アクセシビリティ対応：alt 属性は <img> に指定

注意点

• <img> タグは必ず <picture> の中に含める必要があります。
• srcset と media の記述ミスによって画像が表示されないことがあるため、慎重に記述しましょう。
• <source> に alt 属性は使えません。代わりに <img> に記述します。

aspect-ratioで縦横比を固定する

CSSの aspect-ratio プロパティを使うことで、要素の縦横比（アスペクト比）を明示的に指定できます。画像に限らず、動画や div 要素にも利用可能です。

基本構文

img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

この指定をすることで、幅に応じて高さが自動調整され、16:9の比率が保たれます。特に、レスポンシブデザインでレイアウトを崩さずに画像を扱いたい場面に有効です。

object-fitについては後ほど解説します。

使用例（カード型コンテンツの画像）

<img src="example.jpg" alt="サンプル画像" class="responsive-img">

.responsive-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

object-fitで画像の収まり方を調整する

object-fit プロパティは、画像や動画などの置き方（フィット方法）を指定するプロパティです。アスペクト比を保ちながら、親要素にどう収めるかをコントロールできます。

よく使う値

• cover：要素全体を覆うように拡大・トリミングされる（背景画像の background-size: cover に似ている）
• contain：要素内に収まる最大サイズで表示され、余白が出ることもある

使用例（切り抜き風に表示）

.responsive-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

この例では、正方形の比率（1:1）を保ちつつ、画像の中央部分が拡大表示されるため、カードやサムネイルなどに最適です。

背景画像のレスポンシブ対応（補足）

<img> タグではなく、CSSの background-image を使う場合は以下のようにします。

.hero {
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

background-size: cover により、画像が要素全体を覆うように拡大縮小されます。

注意点

• 縦横を固定してしまうとレスポンシブにならないので、width や height に固定値は使わないようにしましょう。
• アスペクト比を元画像のまま維持したい場合は、height: auto を必ず指定してください。
• アスペクト比を固定にしたい場合は、aspect-ratioを使用する
• Retinaディスプレイ対策として、srcset の併用も効果的です。

まとめ

画像をレスポンシブ対応させるには、以下の方法を活用しましょう。

• CSSの max-width: 100%; height: auto; を使う
• srcset や picture 要素で画像の最適化を図る
• 背景画像は background-size: cover; を使う
• 高解像度や画面幅の違いに対応できる設計を意識する

以下は、記事の末尾などに追加できる「MDN（Mozilla Developer Network）」へのリンク集です。リンクテキストはそのまま表示され、クリックできる形式になっています。

参考リンク

• aspect-ratio – CSS: Cascading Style Sheets | MDN
• object-fit – CSS: Cascading Style Sheets | MDN
• picture要素 – HTML: HyperText Markup Language | MDN
• img要素 – HTML: HyperText Markup Language | MDN
• srcset属性 – HTML: HyperText Markup Language | MDN
• sizes属性 – HTML: HyperText Markup Language | MDN
• メディアクエリ – CSS: Cascading Style Sheets | MDN