width プロパティを 100% に設定した場合は、画像はレスポンシブで、拡大・縮小します：

例

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

Try it Yourself ❯

上の例は、画像は元のサイズよりも大きく拡大されることに注意してください。この解決策として、多くの場合、代わりに max-width プロパティを使用します。

max-width プロパティの指定

max-width プロパティを 100％に設定した場合、画像は、元のサイズから縮小されることがあっても、拡大されることはありません：

例

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

Try it Yourself ❯

Web ページの例に画像を追加する

例

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

Try it Yourself ❯

背景画像

背景画像は、サイズ変更や拡大縮小に対応することができます。.

1. background-size プロパティを "contain" に設定した場合、背景画像を拡大縮小し、コンテンツ領域に合わせしようとします。ただし、画像のアスペクト比（画像の幅と高さの比率）に変更はありません：

例

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid red;
}

Try it Yourself ❯

2. background-size プロパティを "100% 100%" に設定した場合、コンテンツ領域全体に広がるよう、背景画像を引伸ばします：

例

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: 100% 100%;
    border: 1px solid red;
}

Try it Yourself ❯

3. background-size プロパティを "cover" に設定した場合、コンテンツ領域全体に広がるよう、背景画像を拡大縮小します。値 "cover" は、アスペクト比を維持しますので、背景画像の一部が切り取られる場合もあるので注意してください：

例

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: cover;
    border: 1px solid red;
}

Try it Yourself ❯

いろいろなデバイス用のいろいろな画像

大きな画像は、コンピュータの大型画面では全く問題にならないかもしれませんが、小さなデバイスには役に立たないことがあります。いずれにしろ縮小しなければならないのに、なぜ大きな画像をロードするのでしょうか？負荷の軽減や、他の理由により、いろいろなデバイス用に異なった画像を表示するためにメディアクエリを使用することができます。

ここに、異なったデバイスで表示するための、大きな画像と、小さな画像があります：

例

/* For width smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }
}

Try it Yourself ❯

ブラウザの幅をチェックする min-width の代わりに、デバイスの幅をチェックする min-device-width メディアクエリを使用することができます。その時には、ブラウザ・ウインドウの大きさを変更しても、画像は変更されません：

例

/* For devices smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg');
}

/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }
}

Try it Yourself ❯

HTML5 <picture> 要素

HTML5 には、複数の画像を定義することができる <picture> 要素が導入されました。

ブラウザ・サポート

Element
<picture>	未サポート	38.0	38.0	未サポート	25.0

<picture> 要素は、<video> や <audio> 要素と同様に動作します。異なるソースを設定すると、適合する最初のソースが優先的に使用されます：

例

Try it Yourself ❯

media 属性は任意で、CSS @media ルールの中から検索したメディアクエリを受取ります。

<picture> 要素をサポートしていないブラウザのために、<img> 要素も定義する必要があります。

レスポンシブ Web デザイン - 画像

width プロパティの指定

例

max-width プロパティの指定

例

Web ページの例に画像を追加する

例

背景画像

例

例

例

いろいろなデバイス用のいろいろな画像

例

例

HTML5 <picture> 要素

ブラウザ・サポート

例