包含图片
大多数 HTML 标记可以直接在 AMP 中使用，但某些标记（例如 <img> 标记）必须替换为它们的 AMP 等效项。有关完整列表，请参见规范中的 HTML 标记。
我们将使用 <amp-img> 标记以 AMP 的方式将图片添加到我们的页面中。将以下代码复制粘贴到 <body> 中。
<amp-img src="https://source.unsplash.com/random/600x400" width="600" height="400"></amp-img>
AMP 替换某些默认 HTML 标记的原因如下
- 在资源加载之前预测页面的布局。这可确保布局稳定性，从而获得更好的用户体验。
- 控制网络请求，以便延迟加载资源并有效地确定资源优先级。
AMP 团队正在努力支持有效 AMP 页面上的原生 <img> 标记。有关更多信息和当前进展，请参见此 GitHub 问题。
使图片具有响应性
AMP 的强大优势之一是其布局系统。AMP 的布局系统使您可以非常轻松地实现响应式图片，这些图片会自动调整其大小以适应页面上的可用空间。最棒的是：它以确保布局稳定性和避免内容跳跃的方式执行此操作。我们可以通过向 <amp-img> 标记添加 layout="responsive" 来快速使我们的图片具有响应性。请您自己尝试一下，通过更新 amp-img 以匹配以下代码，然后在 Playground 中更改预览窗口大小。
<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400" layout="responsive"></amp-img>
现在，我们的图片可以紧密地放入视口中，并且在视口大小更改时会增大或缩小！
修改布局
虽然非 AMP 页面几乎完全使用 CSS 来布局元素，但 AMP 会强制执行更严格的规则以避免内容布局偏移和其他性能原因。所有 AMP 组件都需要布局，并且每个布局都有不同的尺寸声明要求。例如，我们的图片具有 responsive 布局，该布局需要 width 和 height。如果您从 <amp-img> 中删除 width 属性，则 Playground 将显示验证错误！但是，请不要担心，我们有多种方法可以解决此问题！一种方法是将 width 属性添加回去，另一种方法是更改定义的 layout 属性。尝试将 “responsive” 更新为 “fixed-height”。
<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" height="400" layout="fixed-height"></amp-img>
现在，我们的验证错误消失了！这种布局灵活性使我们可以使用我们知道的东西，例如预先确定的高度而不是宽度，同时仍然保证最终用户的良好体验！在演示 AMP 布局中查看所有可用的布局，并了解 AMP 如何渲染和布局页面以及如何在布局和媒体查询中修改布局。
-