包含图片
大多数 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 如何呈现和布局页面，以及如何在布局和媒体查询中修改布局。
-