CSSを使用してレスポンシブなデザインイメージを追加する方法は次のとおりです
今日人気のあるウェブサイトを見ると、あなたが見ることができる1つのデザイン・トリートメントは、大画面の背景画像です。 これらのイメージを追加する際の課題の1つは、ウェブサイトがさまざまな画面サイズやデバイスに対応しなければならないベストプラクティスであり、 レスポンシブウェブデザインと呼ばれています。
ウェブサイトのレイアウトはさまざまな画面サイズで変更され、拡大されるため、これらの背景画像もサイズに合わせてサイズを変更する必要があります。
実際には、これらの「流体画像」は、応答性の高いウェブサイトの重要な部分の1つです（流体グリッドとメディアクエリーとともに）。 これらの3つの要素は、最初から反応的なWebデザインの重要な要素でしたが、応答可能なインラインイメージをサイトに追加するのはかなり簡単でしたが（インラインイメージはHTMLマークアップの一部としてコード化されたグラフィックです）、背景画像（CSSの背景プロパティを使用してページに書式設定されている）と同じことが、多くのWebデザイナーやフロントエンド開発者にとって長い間重要な課題でした。 ありがたいことに、CSSの "background-size"プロパティの追加によりこれが可能になりました。
別の記事では、CSS3プロパティのbackground-sizeプロパティを使ってウィンドウに収まるようにイメージを伸ばす方法について説明しましたが、このプロパティを展開するためのさらに便利で便利な方法があります。 これを行うには、次のプロパティと値の組み合わせを使用します。
背景サイズ：カバー;
カバーキーワードプロパティは、ウインドウの大きさや大きさにかかわらず、ウインドウに合わせて画像を拡大/縮小するようブラウザに指示します。 画像はスクリーン全体をカバーするようにスケーリングされますが、元の比率とアスペクト比はそのまま維持され、画像そのものが歪むのを防ぎます。
画像は、ウインドウ全体ができるだけ大きくなるようにウインドウ内に配置されます。 つまり、ページ上に何も表示されず、画像上に歪みがないことを意味しますが、画面のアスペクト比と問題の画像に応じて、一部の画像が切り取られることもあります。 たとえば、画像のエッジ（上端、下端、左端、または右端）は、背景位置プロパティに使用する値に応じて画像上で切り取られます。 背景を「左上」に向けると、画像の余分な部分が下側と右側から外れます。 バックグラウンドイメージを中央に配置すると、余分な部分はすべての辺から外れますが、その余分な部分が広がっているため、片側の影響が少なくなります。
background-sizeの使い方：cover;
背景画像を作成するときは、かなり大きな画像を作成することをお勧めします。 ブラウザは画質に顕著な影響を与えることなくイメージを小さくすることができますが、ブラウザがイメージを元のサイズよりも大きなサイズに拡大すると、画質が低下し、ぼやけてピクセル化します。 欠点は、巨大な画像をすべての画面に配信しているときにページのパフォーマンスが低下することです。
これを行うときは、ダウンロード速度とWeb配信のためにそれらのイメージを適切に準備するようにしてください。 結局、十分な大きさのイメージと品質とダウンロード速度のための合理的なファイルサイズとの間の幸せな媒体を見つける必要があります。
スケーリングバックグラウンドイメージを使用する一般的な方法の1つは、イメージがページの全面を占めるようにする場合、そのページがワイドスクリーンで表示されているか、デスクトップコンピュータで表示されているか、それよりずっと小さくてハンドヘルドのモバイルデバイス。
画像をWebホストにアップロードし、背景画像としてCSSに追加します。
背景画像：url（fireworks-over-wdw.jpg）;
バックグラウンドリピート：no-repeat;
バックグラウンド位置：center center;
背景添付：固定;
CSSプレフィックスを最初に追加する：
-webkit-background-size：cover;
-moz-background-size：cover;
-o-background-size：cover;
次に、CSSプロパティを追加します。
背景サイズ：カバー;
多様なデバイスに適した異なるイメージの使用
デスクトップやラップトップの経験を活かすためのレスポンシブルデザインは重要ですが、Webにアクセスできるさまざまなデバイスが大幅に増えており、さまざまな画面サイズがそれに伴います。
先に述べたように、スマートフォンに非常に大きなレスポンスの背景画像を読み込むことは、効率的な、または帯域幅に配慮した設計ではありません。
メディアクエリを使用して、表示されるデバイスに適したイメージを提供し、モバイルデバイスとのウェブサイトの互換性をさらに向上させる方法を学びます。
Jennfier Kryninのオリジナル記事。 編集者Jeremy Girard 9/12/17