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

srcset

使用 srcset 屬性根據不同的媒體表示式來控制元素的素材。特別是，針對所有 amp-img 標籤使用它，以指定根據不同螢幕尺寸要使用的圖片素材。如果 <amp-img> 具有 srcset 屬性但沒有 sizes，AMP 會為所有底層 <img> 標籤的 <amp-img> 自動產生符合 HTML5 定義 sizes 的 sizes 屬性，符合 HTML5 定義的 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 屬性將元素的寬度定義為視窗寬度的 50%，當視窗寬度為 650 像素或更大時。例如，如果視窗寬度為 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%，但對於寬度大於 500 像素 的視窗，高度上限為 200 像素。

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