6

我网站上的大多数图像占据了整个屏幕宽度，因此在我当前的网站版本（不是 AMP）中，我通过执行以下操作将 CSS 中的所有图像设置为填充整个屏幕宽度：

body img { 
  width:100%
}

AMP中是否有与此等价的东西？

4

4 回答 4

13

如果您指定layout="responsive"为<amp-img>标签的属性，则图像的行为大致与您描述的一样。请参阅http://www.mirror.co.uk/news/uk-news/bonfire-night-2015-how-keep-6767214.amp上的示例

<amp-img>标签需要高度和宽度。高度和宽度用于确保图像的空间保持打开状态（因为 AMP 图像是延迟加载的），并在调整大小时遵守纵横比。

于 2015-11-24T15:23:31.493 回答
0

一个简单的响应式图像 - 宽度和高度用于确定纵横比。使用 alt 指定可以替代图像的文本。

https://amp.dev/documentation/examples/components/amp-img/?referrer=ampbyexample.com

于 2019-06-27T15:36:46.337 回答
0

严格来说，这是缩放图像而不是提供响应式图像。如果要确保仅发送设备实际需要的图像大小，则需要使用 srcset 和 sizes 属性。

于 2016-01-27T08:55:39.770 回答
0

您可以在此处查看我们使用 amp-img 和 srcset 来获取响应式图像的示例：https ://ampbyexample.com/components/amp-img/

于 2016-07-15T10:04:05.137 回答