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