レスポンシブウェブデザイン-画像
ブラウザウィンドウのサイズを変更して、ページに合わせて画像がどのように拡大縮小されるかを確認します。
widthプロパティの使用
widthプロパティがパーセンテージに設定され、プロパティが「自動」に設定されている場合height、画像はレスポンシブになり、スケールアップおよびスケールダウンします。
例
img {
width: 100%;
height: auto;
}
上記の例では、画像を元のサイズより大きく拡大できることに注意してください。多くの場合、より良い解決策は、
max-width代わりにプロパティを使用することです。
max-widthプロパティの使用
プロパティが100％に設定されている場合max-width、画像は必要に応じて縮小されますが、元のサイズより大きくなるように拡大されることはありません。
例
img {
max-width: 100%;
height: auto;
}
サンプルWebページに画像を追加する
例
img {
width: 100%;
height: auto;
}
背景画像
背景画像は、サイズ変更やスケーリングにも対応できます。
ここでは、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プロパティが「カバー」に設定されている場合、背景画像はコンテンツ領域全体をカバーするように拡大縮小されます。「カバー」の値はアスペクト比を維持し、背景画像の一部がクリップされる可能性があることに注意してください。
CSSコードは次のとおりです。
例
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
さまざまなデバイスのさまざまな画像
大きな画像は、大きなコンピューター画面では完璧ですが、小さなデバイスでは役に立ちません。とにかく縮小する必要があるのに、なぜ大きな画像をロードするのですか？負荷を軽減するため、またはその他の理由で、メディアクエリを使用して、さまざまなデバイスにさまざまな画像を表示できます。
さまざまなデバイスに表示される1つの大きな画像と1つの小さな画像を次に示します。
例
/* 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');
}
}
HTMLの<picture>要素
HTML<picture>要素により、Web開発者は画像リソースをより柔軟に指定できます。
The most common use of the <picture>
element will be for images used in responsive designs. Instead of having one
image that is scaled up or down based on the viewport width, multiple images can
be designed to more nicely fill the browser viewport.
The <picture> element works similar to the <video> and
<audio> elements. You set up different sources, and the first source that fits the
preferences is the one being used:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture>
The srcset attribute is required, and defines the source of the image.
The media attribute is optional, and accepts the media queries you find in
CSS @media rule.
You should also define an <img> element for browsers that do not support the
<picture> element.