包含一张图片
大多数 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 更新为与以下代码匹配，然后在游乐场中更改预览窗口大小，亲自尝试一下。
<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 属性，游乐场将显示验证错误！但是，不要担心，我们可以通过多种方式解决此问题！一种方法是添加回 width 属性，另一种方法是更改已定义的 layout 属性。尝试将 “responsive” 更新为 “fixed-height”。
<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" height="400" layout="fixed-height"></amp-img>
我们的验证错误消失了！这种布局灵活性让我们可以利用我们已知的信息（例如预先确定的高度，但不是宽度），同时仍然保证最终用户获得良好的体验！在 展示 AMP 布局 中查看所有可用的布局，并了解 AMP 如何渲染和布局页面，以及如何在 布局和媒体查询 中修改布局。
-