使用 srcset、sizes 和 heights 製作回應式圖片

srcset

使用 srcset 屬性根據不同的媒體條件運算式來控制元素的素材資源。特別是，針對所有 amp-img 標記使用此屬性，以指定根據不同螢幕尺寸要使用的圖片素材資源。如果 <amp-img> 具有 srcset 屬性但沒有 sizes，AMP 會為 <amp-img> 的所有底層 <img> 標記自動產生一個 符合 HTML5 sizes 定義的 sizes 屬性。

在這個簡單的範例中，srcset 指定根據螢幕寬度要使用的圖片。w 描述元會告知瀏覽器清單中每張圖片的寬度

<amp-img alt="Hummingbird"
  src="/static/inline-examples/images/hummingbird-wide.jpg"
  width="640"
  height="457"
  layout="responsive"
  srcset="/static/inline-examples/images/hummingbird-wide.jpg 640w,
            /static/inline-examples/images/hummingbird-narrow.jpg 320w">
</amp-img>

若要深入瞭解如何使用 srcset 建立回應式圖片，請參閱現在就使用回應式圖片。

sizes

您也可以將選用的 AMP sizes 屬性與 srcset 一起使用。AMP sizes 屬性說明如何根據任何媒體條件運算式計算元素大小。在任何 AMP 元素上定義 sizes 都會導致 AMP 根據相符的媒體查詢為該元素設定寬度的內嵌樣式。 根據元素計算出的大小，使用者代理程式會選取 srcset 屬性提供的最相關來源。

請考慮以下範例

<amp-img alt="Hummingbird"
  src="/static/inline-examples/images/hummingbird-wide.jpg"
  width="640"
  height="457"
  srcset="/static/inline-examples/images/hummingbird-wide.jpg 640w,
            /static/inline-examples/images/hummingbird-narrow.jpg 320w"
  sizes="(min-width: 650px) 50vw, 100vw">
</amp-img>

sizes 屬性將元素的寬度定義為當視口為 650 像素或更大時，視口大小的 50%。例如，如果視口為 800 像素，則元素的寬度會設定為 400 像素。然後，瀏覽器會選取相對於 400 像素的 srcset 資源 (假設裝置像素比為 1)，在此範例中為 hummingbird-narrow.jpg (320 像素)。

若要深入瞭解 AMP sizes 屬性，請參閱此處。

heights

所有允許 responsive 版面配置的 AMP 自訂元素也支援 heights 屬性。此屬性的值是根據媒體條件運算式的尺寸運算式，與 img sizes 屬性類似，但有兩個主要差異

1. 它適用於元素的高度，而非寬度。
2. 允許使用百分比值，例如 86%。如果使用百分比值，則表示元素寬度的百分比。

當 heights 屬性與 width 和 height 一起指定時，layout 會預設為 responsive。

範例

<amp-img alt="AMP"
  src="/static/inline-examples/images/amp.jpg"
  width="320"
  height="256"
  heights="(min-width:500px) 200px, 80%">
</amp-img>

在此範例中，元素的預設高度將為寬度的 80%，但對於寬度大於 500px 的視口，高度上限為 200px。

• 作者： @pbakaus
  貢獻者： @bpaduch