レスポンシブ Web デザイン - 画像
ブラウザー ウィンドウのサイズを変更して、ページに合わせて画像がどのように拡大縮小されるかを確認します。
width プロパティの使用
もしwidthプロパティがパーセンテージに設定され、heightプロパティが「auto」に設定されている場合、画像はレスポンシブになり、拡大縮小されます。
上記の例では、画像を元のサイズよりも大きくすることができます。多くの場合、より良い解決策は、max-width代わりにプロパティ。
max-width プロパティの使用
もしmax-widthプロパティが 100% に設定されている場合、画像は必要に応じて縮小されますが、元のサイズよりも大きく拡大されることはありません。
サンプル Web ページに画像を追加する
背景画像
背景画像は、サイズ変更とスケーリングにも対応できます。
ここでは、3 つの異なる方法を示します。
1.background-sizeプロパティが「含む」に設定されている場合、背景画像は拡大縮小され、コンテンツ領域に収まるように試行されます。ただし、画像の縦横比 (画像の幅と高さの比例関係) は維持されます。
CSSコードは次のとおりです。
例
2.background-sizeプロパティが「100% 100%」に設定されている場合、背景画像はコンテンツ領域全体をカバーするように引き伸ばされます。
CSSコードは次のとおりです。
例
3.background-sizeプロパティが「cover」に設定されている場合、背景画像はコンテンツ領域全体をカバーするようにスケーリングされます。 「カバー」値は縦横比を維持し、背景画像の一部が切り取られる可能性があることに注意してください。
CSSコードは次のとおりです。
例
デバイスごとに異なる画像
大きな画像は、大きなコンピューター画面では完璧ですが、小さなデバイスでは役に立ちません。とにかく縮小する必要があるのに、なぜ大きな画像をロードするのでしょうか?負荷を軽減するため、またはその他の理由で、メディア クエリを使用して、さまざまなデバイスにさまざまな画像を表示できます。
異なるデバイスで表示される 1 つの大きな画像と 1 つの小さな画像を次に示します。
例
メディアクエリを使用できますmin-device-width、 それ以外のmin-widthブラウザの幅ではなく、デバイスの幅をチェックします。ブラウザ ウィンドウのサイズを変更しても、画像は変更されません。
例
HTML <picture> 要素
HTML<picture>要素を使用すると、Web 開発者は画像リソースをより柔軟に指定できます。
の最も一般的な使用法<picture>要素は、レスポンシブ デザインで使用される画像用になります。ビューポートの幅に基づいて 1 つの画像を拡大または縮小する代わりに、ブラウザのビューポートをより適切に埋めるように複数の画像を設計できます。
の<picture>要素は<video>と<audio>要素。さまざまなソースを設定すると、設定に適合する最初のソースが使用されます。
例
のsrcset属性は必須で、画像のソースを定義します。
のmedia属性はオプションであり、あなたが見つけたメディアクエリを受け入れますCSS @media ルール.
また、定義する必要があります<img>をサポートしていないブラウザの要素<picture>エレメント。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。