レスポンシブウェブページデザイン - イメージ

width 属性の使用

「 width 属性をパーセントに設定し、高さを「auto」に設定することで、画像は拡大または縮小に対応します：

例

img {
  width: 100%;
  height: auto;

自分で試してみてください

上記の例では、画像は元のサイズを超えて拡大できます。多くの場合、より良い解決策は「 max-width 属性。

max-width 属性の使用

max-width 属性が 100％に設定されている場合、画像は必要に応じて縮小しますが、元のサイズを超えて拡大することはありません：

例

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

自分で試してみてください

インスタンスウェブページに画像を追加

例

img {
  width: 100%;
  height: auto;

自分で試してみてください

背景画像

背景画像もサイズ変更や拡大率に対応できます。

これは私たちが展示する3つの異なる方法です：

1. 「 background-size 属性設定が「contain」の場合、背景画像は拡大され、内容エリアに合わせて試みますが、画像はその長さと幅の比率（画像の幅と高さの間の関係）を保ちます：

これはCSSコードです：

例

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

自分で試してみてください

2. 設定が「cover」の場合 background-size 属性が「100% 100%」に設定されている場合、背景画像は内容エリア全体を覆うように伸びます：

これはCSSコードです：

例

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

自分で試してみてください

3. 設定が「100% 100%」の場合 background-size 属性が「cover」に設定されている場合、背景画像は内容エリア全体を覆うようにスケールします。注意していただきたいのは、「cover」値は横幅と高さの比率を保ち、背景画像の一部がカットされる可能性があります：

これはCSSコードです：

例

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

自分で試してみてください

異なるデバイス用に異なる画像を準備します

大きな画像は大規模なコンピュータのスクリーン上で完璧に表示されますが、小さなデバイスでは役に立ちません。なぜ大きな画像を縮小しないでそのまま読み込むのか？負荷を減らすためや他の理由で、メディアクエリを使用して異なるデバイスに異なる画像を表示できます。

これは大きな画像と小さな画像のセットで、異なるデバイス上で表示されます：

例

/* 400ピクセル以下の幅に対して： */
body {
  background-image: url('img_smallflower.jpg'); 

/* 400ピクセルまたはそれ以上の幅に対して： */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg');

自分で試してみてください

メディアクエリを使用して min-device-width ではなく min-width デバイスの幅をチェックし、ブラウザの幅ではなく：

例

/* 400ピクセル以下のデバイスに対して： */
body {
  background-image: url('img_smallflower.jpg'); 

/* 400ピクセルおよびそれ以上のデバイスに対して： */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg');

自分で試してみてください

HTML5 <picture> 要素が導入されました

HTML5では、 <picture> 要素を使って、複数の画像を定義できます。

ブラウザのサポート

38.0 13 38.0 9.1 25.0

<picture> 要素の機能は、 <video> および <audio> 要素です。異なるソースを設定し、優先順位の高い最初のソースが現在のソースです：

例

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

自分で試してみてください

srcset 属性は必須であり、画像のソースを定義します。

media 属性はオプションであり、以下のものを受け入れます。 CSS @media ルール に含まれるメディアクエリを探してください。

ヒント：サポートしていない場合、以下のメディアクエリ <picture> 要素のブラウザ定義 <img> 要素。