由于我已经实施了 Google AMP，我一直在努力解决这个问题。每次我添加一个width远小于我的网站的图像时width，都会amp-img自动添加边距以保持纵横比，如下所示：

我已经尝试过 [官方文档] 中提到的其他布局，（https://www.ampproject.org/docs/guides/responsive/control_layout#supported-values-for-the-layout-attribute）如flex-item。

flex-item例如，我可以在桌面版本中获得所需的行为，即减少图像的总边距，如下所示：

但是在移动版中，当图像比屏幕宽时，图像会左右溢出。

当图像相对较小时，有没有办法可以调整responsive layout以便删除如此大的边距？

在代码中调查了一下，问题似乎是由 element 引起的i-amphtml-sizer，这是 google-amp 自动添加的一个元素，我无法控制它。

我不会发布我的博客文章的 url，以防它被认为是垃圾邮件，但如果由于某种原因你需要它，我会更新问题。

更新

似乎越来越多的人遇到了这个问题。

有<amp-anim>gif 动画的标签。但我发现该<amp-img>标签可以显示 gif 动画。我知道<amp-anim>标签可以设置一个占位符，但我不需要它。我发现没有任何异议了。
所以，我的问题是“<amp-img>为 gif 动画使用标签有问题吗？”

如果要检查标签和标签的工作方式，请打开https://ampbyexample.com/playground/并粘贴下面的 html 代码。<amp-img><amp-anim>

我有一个最近迁移到 amp-html 的博客网站。

我在使用amp-img标签时遇到问题。First blogger 没有将 First 识别amp-img为帖子的第一张图片，并且无法从中制作默认缩略图。

此外，当使用 facebook 在 facebook 上共享页面时amp-share，所选图像始终是备用图像，我已用og:image属性进行了标记。

图像分辨率超过 facebook 要求的最低分辨率。我已经看到这种安排在其他网站上运行良好。有人可以在这里快速浏览一下吗：Pratyush.info

I have a basic AMP page with an amp iframe and a few amp images

https://www.freshcottages.com/region/cambridgeshire.htm

When you click the main menu item, say "England", the menu appears behind the AMP iframe and AMP images.

Is there any way to stop this? I've tried playing with z-index but not had any success.

If the items are turned into standard iframe and img elements then they work fine so it just looks like its the AMP framework that's throwing it off

有什么方法可以在中使用 onerror 属性<amp-img>吗？

它在 html 中运行良好。

但是 amp html 会在 amp-img 中创建 img 标签

在 amp 文档https://www.ampproject.org/docs/reference/validation_errors 上，它说源需要一个媒体标签（amp-audio,amp-video等）。

我有一个带有多个源元素的图片标签，但是当我尝试将其转换为时，amp-img我得到了它需要的错误amp-video。

你知道为什么它不接受amp-img它的父元素吗？它不被认为是媒体标签吗？

我正在研究 nodejs 和 mongodb。当我放置此代码时；<%- postContent %>，它呈现为以下格式：

现在，我的查询是；我如何转换<img>成<amp-img>？

我有一个基于 switch case 出现在循环中的图像列表，这里是代码：

除了一些图像外，一切都工作正常，在前端我可以看到除一些图像之外的所有图像列表，即使上面的某些帖子中出现了相同的图像。这是一个截图

这是检查员的截图

在这个不工作的图像上方工作的相同图像：

我正在尝试在我的应用中使用AMP 。我可以通过以下方式获取图像：

但由于我添加了 AMP，它们将不再加载：

知道发生了什么吗？

更新 1

这是我添加到我的网站标题的内容：

这是我在控制台中遇到的错误：

对于符合 Google Accelerated Mobile Pages (AMP) 项目的页面，延迟加载图像的方法是什么？

据我了解，延迟加载意味着在呈现首屏内容后的某个时间将图像加载到客户端。延迟加载似乎有三种变体：

1. 视口 - 图像加载由其接近视口触发
2. 设置延迟 - 图像加载由计时器触发
3. 手动 - 图像加载由客户端事件触发

所有这些方法都可以使用 javascript 来实现。但是，AMP 不允许使用 javascript，只能使用自定义 AMP 脚本。

视口方法是最理想的，因为它将内容加载降至最低。AMP 有一个自定义脚本，它支持用于启动和停止视频的视口方法。但是，似乎没有对 amp-img 的类似支持。

我认为，amp-animation 似乎支持设置的延迟。这似乎是一种相当复杂的方法。此外，延迟方法是不可取的，因为最佳延迟取决于可变的互联网带宽。

延迟方法也可以用 PHP 实现。但是，PHP 是在服务器端解析的。这意味着必须重新加载页面，这完全违背了延迟加载的目的。

似乎只剩下手动方法了。下面的代码片段创建了两个有选择地显示或隐藏图像的按钮。

amp-img id='img1' ...隐藏

按钮上="tap.img1.show()"

按钮上="tap.img1.hide()"

对于移动网站，显示按钮可以嵌入到折叠内容的上方，以便用户在浏览网站时触发它。然而，这似乎是一个kludge

Google AMP 是否有效地将延迟加载限制为手动方法，或者是否有其他方法可以完成视图端口或延迟延迟加载？

先感谢您。