使用 srcset、sizes 和 heights 的响应式图片

srcset

使用 srcset 属性根据不同的媒体表达式控制元素的资产。特别是，对所有 amp-img 标记使用它来指定根据不同的屏幕尺寸使用哪些图片资产。如果 <amp-img> 具有 srcset 属性但没有 sizes，AMP 将为所有 <amp-img> 的底层 <img> 标记自动生成一个 sizes 属性，该属性符合 sizes 的 HTML5 定义。

在这个简单的示例中，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%，当视口为 650px 或更大时。例如，如果视口为 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 提供支持