CSSで画像をレスポンシブにする方法！width: 100%とobject-fitの使い方

画像をレスポンシブにする方法（width: 100%・object-fit）

先生と生徒の会話形式で理解しよう

生徒

「スマホで見ると、画像が画面からはみ出して横にガタガタ動いちゃうんです。どうしたらいいですか？」

先生

「それは画像が『レスポンシブ』になっていないからですね。CSSを使えば、画面の大きさに合わせて自動で伸び縮みさせることができますよ。」

生徒

「自動で縮んでくれるんですか？でも、無理やり縮めると画像が変に細長くなったりしませんか？」

先生

「鋭いですね！縦横の比率を保ったまま綺麗に表示する『object-fit』という便利な命令もあるんです。一緒に見ていきましょう！」

1. 画像のレスポンシブ対応が必要な理由とは？

Webサイトを作るときに一番気をつけたいのが、見る人の環境です。最近ではパソコンだけでなく、スマートフォンやタブレットなど、さまざまな画面サイズでサイトが閲覧されます。これを「マルチデバイス」と呼びます。

もし画像の大きさを「横幅800ピクセル」と固定してしまったらどうなるでしょうか。画面幅が300ピクセルしかないスマホで見ると、画像がはみ出してしまい、右にスクロールしないと全体が見えない、とても使いにくいサイトになってしまいます。これを防ぎ、どんな画面サイズでもぴったり収まるようにすることを「レスポンシブ対応」と言います。画像はサイトの印象を左右する大きな要素なので、このテクニックはプログラミング未経験の方が最初にマスターすべき基本中の基本です。

2. width: 100%で画像を画面にフィットさせる

画像を画面の幅に合わせて自動で伸縮させるための最もシンプルで強力な魔法の言葉が「width: 100%（ウィズ：100パーセント）」です。これを使うと、画像が入っている親の箱（画面の幅など）に対して、常に100パーセントの幅で表示されるようになります。

例えば、大きな画像をスマホで見たときはスマホの幅いっぱいに、パソコンで見たときはパソコンの幅いっぱいに縮んだり広がったりしてくれます。このとき、高さ（height）を「auto（オート）」にしておくのがコツです。そうすることで、横幅が変わっても縦横の比率が崩れず、画像が歪んでしまうのを防ぐことができます。パソコン初心者の人は、まずはこの1行を覚えるだけで劇的にサイトが綺麗になります。


<style>
    .responsive-img {
        width: 100%; /* 親の幅いっぱいに広がる */
        height: auto; /* 高さは自動調整して比率を保つ */
    }
</style>

<div style="width: 300px; border: 2px solid red; padding: 10px;">
    <p>この赤い枠が「親の箱」です</p>
    <img src="/img/sample150-100.jpg" class="responsive-img" alt="レスポンシブ画像">
</div>

ブラウザ表示

3. max-widthを使って画像が大きくなりすぎるのを防ぐ

「width: 100%」は非常に便利ですが、一つだけ弱点があります。それは、小さな画像を無理やり大きな画面いっぱいに広げてしまうことです。これでは画像がぼやけて、画質が悪くなってしまいます。そこで登場するのが「max-width: 100%（マックス・ウィズ：100パーセント）」です。

これは「最大でも100パーセントまで、でも画像本来の大きさよりは大きくならないでね」という賢い命令です。画面が画像の元々のサイズより小さいときは画面に合わせて縮み、画面が大きいときは画像本来のサイズで止まってくれます。最近のWeb制作現場では、この「max-width: 100%」を全ての画像に最初から設定しておくのが一般的です。これこそが、画像レスポンシブの「黄金のルール」と言えるでしょう。

4. 画像を好きな形に切り抜くobject-fitの役割

ここまでの説明は、画像の全体を表示する方法でした。しかし、デザインによっては「どんな画面サイズでも、画像を決まった四角形や正方形の中に収めたい」という場合があります。例えば、商品一覧の写真をすべて同じ大きさの正方形で並べたいときなどです。

無理やり画像を指定したサイズに押し込むと、画像が横に潰れたり縦に伸びたりして「太った」「痩せた」ような変な見え方になってしまいます。そんな問題を解決するのが「object-fit（オブジェクト・フィット）」です。これを使えば、余った部分をいい感じに切り取って（トリミングして）、指定した枠の中に写真を綺麗に収めることができます。まるで写真館で写真をフォトフレームに入れるような操作が、CSSだけでできてしまうのです。


<style>
    .crop-img {
        width: 200px;
        height: 200px; /* 無理やり正方形にする */
        object-fit: cover; /* 比率を保ったまま枠いっぱいに広げて切り抜く */
        border: 3px solid #333;
    }
</style>

<p>元の画像は横長ですが、綺麗に正方形に切り抜かれます</p>
<img src="/img/sample150-100.jpg" class="crop-img" alt="切り抜き画像">

ブラウザ表示

5. object-fit: coverとcontainの違いを理解しよう

「object-fit」でよく使われる二つの設定、「cover（カバー）」と「contain（コンテイン）」の違いを覚えましょう。これさえ分かれば、画像の表示は思いのままです。

「cover」は、枠を隙間なく埋めるように画像を表示します。枠からはみ出した部分は自動的にカットされます。おしゃれな雰囲気を出したいときや、人物の顔などを中心に表示したいときに最適です。一方「contain」は、画像全体が必ず枠の中に収まるように表示します。枠と画像の比率が合わない場合は隙間ができますが、大切な情報が書かれたバナーやロゴなど、1ミリも切りたくない画像に使いましょう。この使い分けができるようになると、サイトのクオリティがグッと上がります。

6. 画像を真ん中に寄せるobject-positionのテクニック

「object-fit: cover」で画像を切り抜いたとき、「右側をもっと見せたい」「上の方を重視したい」と思うことがあります。標準では画像の中心を基準に切り抜かれますが、これを変更するのが「object-position（オブジェクト・ポジション）」です。

「object-position: top;（上）」や「object-position: 80% 20%;（右から80％、上から20％の位置）」といった具合に、どこを見せたいかを細かく指定できます。パソコンとスマホで画面比率が変わっても、常に見せたい主役を中央にキープすることができる便利な機能です。プログラミング未経験の方は、まず「上下左右」という言葉で指定できることを知っておくだけで十分です。


<style>
    .position-img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        object-position: bottom; /* 画像の下側を優先して表示 */
        background-color: #ddd;
    }
</style>

<p>画像の「下の方」を基準に切り抜いて表示しています</p>
<img src="/img/sample150-100.jpg" class="position-img" alt="位置調整画像">

ブラウザ表示

7. レスポンシブ画像で読み込み速度も改善！

レスポンシブデザインでは見た目だけでなく、「表示スピード」も重要です。パソコン用の巨大なサイズの画像をスマホで読み込むと、データ通信量をたくさん使ってしまい、表示されるまで時間がかかってしまいます。見る人が途中で嫌になって帰ってしまう「離脱」の原因にもなります。

HTMLの「picture（ピクチャー）タグ」や「srcset（ソースセット）属性」を使うと、画面サイズに合わせて読み込む画像ファイル自体を切り替えることができます。「スマホのときは軽い小さな画像」「パソコンのときは綺麗な大きな画像」と自動で使い分ける高度な技です。最初は難しく感じるかもしれませんが、まずは「画像を縮めて表示するだけでなく、軽い画像を送る工夫もあるんだ」と頭の片隅に置いておきましょう。

8. ブラウザで確認しながら調整するコツ

自分が書いたコードがうまく動いているか、実際にパソコンの画面で確認してみましょう。画面の右端をマウスで掴んで、横に広げたり狭くしたりしてみてください。画像がガクガクせず、スムーズに伸び縮みしていれば成功です！

もし思い通りにいかないときは、ブラウザの「検証モード」を使って、画像のプロパティをチェックしましょう。幅（width）が効いているか、余計な余白（padding）が邪魔をしていないかなどを見ることができます。一つずつ「なぜこうなるんだろう？」と試行錯誤することが、上達への一番の近道です。画像のレスポンシブ対応を味方につけて、どんなデバイスでも美しく見える素敵なWebサイトを作り上げましょう。


<style>
    .final-sample {
        max-width: 100%;
        height: 250px;
        object-fit: contain; /* 画像を切り取らずに全体を表示 */
        background-color: #f0f0f0;
        display: block;
        margin: 0 auto;
    }
</style>

<div style="border: 2px dashed #999; padding: 20px;">
    <img src="/img/sample120-120.jpg" class="final-sample" alt="最終サンプル">
    <p style="text-align: center;">枠の中でも画像全体が見える「contain」の表示です</p>
</div>

ブラウザ表示

2026年最新スキルアップ・実践セミナー