大多数 HTML 标记可以直接在 AMP 中使用，但某些标记（例如<img>标记）必须替换为它们的 AMP 等效项。
我们将使用<amp-img>标记以 AMP 方式将图像添加到我们的页面。将下面的代码复制并粘贴到<body>。
<amp-imgsrc="https://source.unsplash.com/random/600x400"width="600"height="400"></amp-img>
AMP 替换某些默认 HTML 标记的原因如下：
- 在加载资产之前投影页面的布局。这确保了布局的稳定性，从而获得更好的用户体验。
- 控制网络请求，使资源延迟加载，并有效地对资源进行优先级排序。
AMP 团队正在努力支持<img>有效 AMP 网页上的原生代码。
使您的图像响应
AMP 的强大优势之一是其布局系统。AMP 的布局系统使实现响应式图像变得非常容易，这些图像会根据页面上的可用空间自动调整其大小。最好的事情是：它以确保布局稳定性并避免内容跳转的方式做到这一点。我们可以通过添加标签快速layout="responsive"使我们的图像响应。<amp-img>通过更新您amp-img的代码以匹配下面的代码，然后更改 Playground 中的预览窗口大小，自己尝试一下。
<amp-imgsrc="https://source.unsplash.com/Ji_G7Bu1MoM/600x400"width="600"height="400"layout="responsive"></amp-img>
我们的图像现在紧贴在我们的视口中，并随着视口大小的变化而增长或缩小！
修改布局
虽然非 AMP 页面可能几乎只使用 CSS 来布局元素，但 AMP 执行更严格的规则以避免内容布局偏移和其他性能原因。所有 AMP 组件都需要布局，并且每个布局都有不同的维度声明要求。例如，我们的图像具有responsive布局，它需要width和height。如果您width从操场上移除该属性，<amp-img>将显示验证错误！但是，不要担心，有几种方法可以解决这个问题！一种方法是重新添加width属性，但另一种方法是更改定义的layout属性。尝试更新“responsive”到“fixed-height”.
<amp-imgsrc="https://source.unsplash.com/Ji_G7Bu1MoM/600x400"height="400"layout="fixed-height"></amp-img>
在那里，我们的验证错误消失了！这种布局的灵活性让我们可以使用我们所知道的，例如预先确定的高度而不是宽度，同时仍然保证最终用户的良好体验！在演示 AMP 布局中查看所有可用布局，并了解 AMP 如何呈现和布局页面，以及如何在布局和媒体查询中修改布局。
