使用 srcset 屬性的響應式影象

使用帶有大小的 srcset

<img sizes="(min-width: 1200px) 580px,
      (min-width: 640px) 48vw,
      98vw"
    srcset="img/hello-300.jpg 300w,
      img/hello-600.jpg 600w,
      img/hello-900.jpg 900w,
      img/hello-1200.jpg 1200w"
    src="img/hello-900.jpg" alt="hello">

sizes 就像媒體查詢一樣，描述了視口對影象的佔用空間。

• 如果視口大於 1200px，則影象正好是 580px（例如，我們的內容集中在容器中，最大寬度為 1200px。影象佔其中的一半減去邊距）。
• 如果視口位於 640px 和 1200px 之間，則影象佔視口的 48％（例如，影象與我們的頁面縮放，並佔視口寬度的一半減去邊距）。
• 如果視口是任何其他大小，在我們的情況下小於 640px，影象佔視口的 98％（例如影象縮放與我們的頁面並取視口的全寬減去邊距）。最後一項必須省略介質條件。

srcset 只是告訴瀏覽器我們有哪些影象，以及它們的大小。

• img/hello-300.jpg 寬 300px，
• img/hello-600.jpg 寬 600px，
• img/hello-900.jpg 寬 900px，
• img/hello-1200.jpg 寬 1200px

src 始終是強制性影象源。在使用 srcset 的情況下，如果瀏覽器不支援 srcset，src 將提供後備影象。

使用沒有大小的 srcset

<img src="img/hello-300.jpg" alt="hello"
     srcset="img/hello-300.jpg 1x, 
       img/hello-600.jpg 2x,
       img/hello-1200.jpg 3x">

srcset 提供可用影象列表，裝置畫素比為 x 描述符。

• 如果裝置畫素比為 1，請使用 img/hello-300.jpg
• 如果裝置畫素比為 2，請使用 img/hello-600.jpg
• 如果裝置畫素比為 3，請使用 img/hello-1200.jpg

src 始終是強制性影象源。在使用 srcset 的情況下，如果瀏覽器不支援 srcset，src 將提供後備影象。