`srcset`を使用したレスポンシブ画像

HTMLimgタグのsrcset属性を使用してレスポンシブ画像を定義する方法

ザ・srcsetの属性imgタグを使用すると、好みに応じて、ピクセル密度またはウィンドウ幅に応じてブラウザが使用できるレスポンシブ画像を設定できます。このように、たとえばモバイルデバイス上にある場合、より大きな画像をダウンロードすることなく、ページをレンダリングするために必要なリソースのみをダウンロードできます。

次に、4つの異なる画面サイズに対して4つの追加画像を提供する例を示します。

<img src="dog.png"
  alt="A picture of a dog"
  srcset="dog-500.png 500w,
         dog-800.png 800w,
       dog-1000.png 1000w,
       dog-1400.png 1400w">

の中にsrcset私たちはwウィンドウ幅を示すために測定します。

そうするので、私たちも使用する必要がありますsizes属性:

<img src="dog.png"
  alt="A picture of a dog"
  sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
  srcset="dog-500.png 500w,
         dog-800.png 800w,
       dog-1000.png 1000w,
       dog-1400.png 1400w">

この例では、(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxの文字列sizes属性は、複数の条件をコンマで区切って、ビューポートに関連する画像のサイズを記述します。

メディアの状態max-width: 500pxビューポートの幅に相関して画像のサイズを設定します。つまり、ウィンドウサイズが500px未満の場合、ウィンドウサイズの100%で画像がレンダリングされます。

ウィンドウサイズが大きいが<900px、ウィンドウサイズの50%で画像をレンダリングします。

さらに大きい場合は、800pxで画像をレンダリングします。

ザ・vw unit of measure can be new to you, and in short we can say that 1 vwはウィンドウ幅の1%なので、100vwウィンドウ幅の100%です。

を生成するための便利なウェブサイトsrcset徐々に小さくなる画像はhttps://responsebreakpoints.com/

私の無料ダウンロードHTMLハンドブック


その他のhtmlチュートリアル: