AMP

使用 srcset、sizes 和 heights 实现自适应图片

srcset

使用 srcset 属性根据不同的媒体表达式控制元素的资源。特别是,对所有 amp-img 标签使用它,以指定要根据不同的屏幕尺寸使用的图像资源。如果 <amp-img> 具有 srcset 属性但没有 sizes 属性,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>
在 Playground 中打开此代码片段

注意 – AMP 支持在所有浏览器中使用带有 w 描述符的 srcset。

了解有关使用 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>
在 Playground 中打开此代码片段

当视口为 650px 或更大时,sizes 属性将元素的宽度定义为视口大小的 50%。例如,如果视口为 800px,则元素的宽度设置为 400px。然后,浏览器选择相对于 400px 的 srcset 资源,假设设备像素比为 1,在这种情况下为 hummingbird-narrow.jpg(320px)。

重要 – 当同时指定 sizes 属性以及 width 和 height 时,布局默认为 responsive

在此处阅读有关 AMP sizes 属性的更多信息

heights

所有允许 responsive 布局的 AMP 自定义元素也都支持 heights 属性。此属性的值是一个基于媒体表达式的大小表达式,类似于 img sizes 属性,但有两个主要区别

  1. 它应用于元素的高度,而不是宽度。
  2. 允许使用百分比值,例如 86%。如果使用百分比值,则表示元素宽度的百分比。

当同时指定 heights 属性以及 widthheight 时,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>
在 Playground 中打开此代码片段

在此示例中,元素的默认高度将为宽度的 80%,但对于宽度大于 500px 的视口,高度将被限制为 200px