TECH I.S.

レスポンシブ Web デザイン - 画像


ブラウザー ウィンドウのサイズを変更して、ページに合わせて画像がどのように拡大縮小されるかを確認します。


width プロパティの使用

もしwidthプロパティがパーセンテージに設定され、heightプロパティが「auto」に設定されている場合、画像はレスポンシブになり、拡大縮小されます。

img {   width: 100%;   height: auto; }

自分で試してみる »

上記の例では、画像を元のサイズよりも大きくすることができます。多くの場合、より良い解決策は、max-width代わりにプロパティ。


max-width プロパティの使用

もしmax-widthプロパティが 100% に設定されている場合、画像は必要に応じて縮小されますが、元のサイズよりも大きく拡大されることはありません。

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プロパティが「cover」に設定されている場合、背景画像はコンテンツ領域全体をカバーするようにスケーリングされます。 「カバー」値は縦横比を維持し、背景画像の一部が切り取られる可能性があることに注意してください。


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 開発者は画像リソースをより柔軟に指定できます。

の最も一般的な使用法<picture>要素は、レスポンシブ デザインで使用される画像用になります。ビューポートの幅に基づいて 1 つの画像を拡大または縮小する代わりに、ブラウザのビューポートをより適切に埋めるように複数の画像を設計できます。

<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>エレメント。



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細