レスポンシブWebデザイン - フォト
width属性を使用します
width属性を100％に設定されている場合、画像は、応答機能の上下範囲に従って実現されます。
上記の例では、画像が元の画像よりも大きくなることに注意してください。 我々は、 最大幅は 、この問題に良い解決策を属性を使用することができます。
max-widthプロパティを使用して、
max-widthプロパティを100％に設定されている場合、画像は元のサイズよりも大きくなることはありません。
画像ページを追加します。
背景画像
背景画像は、サイズ変更やズームに応答することができます。
されている以下の3つの異なる方法：
1.背景サイズのプロパティが「含む」に設定されている場合、背景画像は、適応コンテンツの面積比です。 写真は、その比率は変わらず維持します：
これは、CSSのコードです：
例
幅：100％;
高さ：400ピクセル;
背景画像：のURL（ 'img_flowers.jpg '）;
背景リピート：なしリピート;
背景サイズ：含まれています。
国境：1pxの固体赤。
}
»をお試しください
2.背景-sizeプロパティが「100％100％」に設定されている場合は、背景画像が領域全体をカバーするように拡張されます。
例
これは、CSSのコードです：
幅：100％;
高さ：400ピクセル;
背景画像：のURL（ 'img_flowers.jpg '）;
背景サイズ：100％100％ 。
国境：1pxの固体赤。
}
»をお試しください
3.背景サイズのプロパティが「表紙」に設定されている場合は、背景画像が背景画像領域ように完全にバックグラウンドをカバーするのに十分な大きさに拡張されます。 背景画像の一部が背景位置決め領域に表示することができないので、プロパティは画像の比率のままであることに注意してください。
これは、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-デバイス幅のmin-width属性の代替メディアクエリを使用することができ、それはデバイス幅の代わりに、ブラウザの幅を検出します。 ブラウザのサイズをリセットし、画像サイズは変更されません。
例
体{
背景画像：のURL（ 'img_smallflower.jpg '）;
}
400ピクセル（も等しい）より大きい/ *デバイス：* /
@mediaだけ画面と（分-デバイス -width：400ピクセル）{
体{
背景画像：のURL（ 'img_flowers.jpg '）;
}
}
»をお試しください
HTML5 <絵>要素
HTML5の<picture>要素は、複数の画像を設定することができます。
ブラウザのサポート
| 要素 | |||||
|---|---|---|---|---|---|
| <写真> | サポートしていません。 | 38.0 | 38.0 | サポートしていません。 | 25.0 |
<picture>に類似要素<video>と<audio>要素。 異なるデバイスは、好ましい使用の最初のセットを、リソース、リソースすることができます：
例
<ソースsrcset = "img_smallflower.jpg「メディア ="（最大幅：400ピクセル） ">
<ソース srcset = "img_flowers.jpg">
<IMG SRC = "img_flowers.jpg" ALT = "花">
</写真>
»をお試しください
srcsetプロパティは、画像リソースの定義である必要があります。
media属性は、メディアでは、オプションである問い合わせるCSSの@mediaルールは詳細を参照してください。
サポートされていません<picture>あなたが定義することができ、ブラウザ要素<img>の代わりに要素を。