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

srcset

使用 srcset 屬性根據不同的媒體表示式控制元素的素材資源。尤其是，將其用於所有 amp-img 標記，以指定根據不同螢幕尺寸要使用的圖片素材資源。如果 <amp-img> 具有 srcset 屬性但沒有 sizes，AMP 將為所有底層 <img> 標記的 <amp-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

您也可以搭配 srcset 使用選用的 AMP sizes 屬性。 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>

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

如需更多資訊，請參閱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