レスポンシブ Web デザイン -画像
width 属性を使用する
width 属性を 100% に設定すると、画像は拡大縮小の範囲に応じてレスポンシブ機能を実現します：
注：上記の例では、画像は元の画像よりも大きくなります。私たちは使用できますmax-width属性を使用すると、この問題をうまく解決できます。
max-width 属性を使用する
max-width 属性を 100% に設定すると、画像は元のサイズより大きくなることはありません：
ウェブページに画像を追加する
背景画像
背景画像はレスポンシブにサイズ変更や拡大縮小ができます。
以下は3つの異なる方法です：
1. background-size 属性を "contain" に設定すると、背景画像はコンテンツ領域に比例して自動調整されます。画像の縦横比は維持されます：
これは CSS コードです:
例
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
試してみる »
2. background-size 属性を "100% 100%" に設定すると、背景画像は領域全体を覆うように引き伸ばされます：
例
これは CSS コードです:
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
試してみる »
3. background-size 属性を "cover" に設定すると、背景画像は背景領域を完全に覆うように十分な大きさに拡張されます。この属性は画像の縦横比を維持するため、背景画像の一部が背景配置領域に表示されない場合があることに注意してください。
これは CSS コードです:
例
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
試してみる »
デバイスごとに異なる画像を表示する
大きな画像は大画面では表示できますが、小画面ではうまく表示できません。小画面で大きな画像を読み込む必要はありません。読み込み速度に大きく影響します。そこで、メディアクエリを使用して、デバイスに応じて異なる画像を表示できます。
以下では、大きな画像と小さな画像が異なるデバイスに表示されます：
例
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');
}
}
試してみる »
メディアクエリの min-width 属性の代わりに min-device-width を使用できます。これはブラウザの幅ではなくデバイスの幅を検出します。ブラウザのサイズを変更しても、画像サイズは変わりません。
例
body {
background-image: url('img_smallflower.jpg');
}
/* デバイスが 400px 以上の場合: */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
試してみる »
HTML5 <picture> 要素
HTML5 の<picture>要素は複数の画像を設定できます。
ブラウザサポート
| 要素 | |||||
|---|---|---|---|---|---|
| <picture> | 非対応 | 38.0 | 38.0 | 非対応 | 25.0 |
<picture>要素は<video>と<audio><video> 要素に似ています。異なるリソースを設定でき、最初に設定されたリソースが優先して使用されます：
例
<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><picture> 要素のブラウザでは、<img> 要素を定義することもできます<img>要素で代替します。