幅プロパティを使用
場合はwidthプロパティを100％に設定され、イメージがダウンして応答するとスケールアップとなります。
上記の例では、画像は元のサイズよりも大きくなるようにスケールアップすることができることに注意してください。 よりよい解決策は、多くの場合、使用することになりmax-width代わりにプロパティを。
max-widthプロパティの使用
場合max-widthプロパティを100％に設定され、画像はそれがある場合は縮小するが、元のサイズよりも大きくなるようにスケールアップすることはありません。
例Webページに画像を追加
背景画像
背景画像は、サイズ変更やスケーリングに対応することができます。
ここでは、3つの異なる方法が表示されます：
1.場合はbackground-sizeプロパティが「含まれている」ように設定され、背景画像が拡大縮小、およびコンテンツ領域に収まるようにしようとします。 しかし、画像は、そのアスペクト比（画像の幅と高さの比例関係）を維持します。
ここでは、CSSのコードは次のとおりです。
例
div {
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のコードは次のとおりです。
例
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
} »それを自分で試してみてください 場合3. background-sizeプロパティがに設定されている"cover" 、背景画像がコンテンツ領域全体をカバーするように拡張されます。 ていることに注意してください"cover"値はアスペクト比を保持し、背景画像の一部が切り取られてもよいです。
ここでは、CSSのコードは次のとおりです。
例
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
} »それを自分で試してみてください 異なるデバイスの異なる画像
大きな画像は、小さなデバイスに大きなコンピュータ画面上の完璧な、しかし無駄にすることができます。 あなたはとにかくそれを縮小する必要があるのに、なぜ大きな画像を読み込みますか？ 負荷を低減するために、または任意の他の理由のために、異なるデバイスに異なる画像を表示するためにメディアクエリを使用することができます。
ここでは一つの大きな画像と異なるデバイス上に表示されます小さい方の画像は、次のとおりです。
例
/* 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');
}
} »それを自分で試してみてください あなたはメディアクエリを使用することができmin-device-widthの代わりに、 min-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');
}
} »それを自分で試してみてください HTML5 <picture>要素
HTML5は、導入された<picture>複数の画像を定義することができます要素を、。
ブラウザのサポート
| 素子 | |||||
|---|---|---|---|---|---|
| <picture> | サポートされていません | 38.0 | 38.0 | サポートされていません | 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ルールを 。
また、定義しなければならない<img>サポートしていないブラウザのための要素<picture>要素を。