如何在 amp 页面上响应地包含图像？答案

【问题标题】：How to contain a image responsively on an amp page?如何在 amp 页面上响应地包含图像？
【发布时间】：2019-02-15 23:53:58
【问题描述】：

由于我们需要为 amp 页面定义带有 amp-img 标签的图像，因此问题在于这些图像的响应特性。例如：

<p align="center"><amp-img width="400px" height="200px" layout="responsive" src="https://xyx.com/abc.png"></p>

现在如果主 div 为 600px，那么图像将被拉伸到 600px（超过正常的 100%），但对于主 div 为 300px 的移动设备，图像将调整高度并且完美很好，因为它将包含在 300px div 中，将其拉伸到 100% 不会生效。此外，布局不能设置为固定，因为它会延伸到移动显示之外。解决方案是什么？

【问题讨论】：

标签： html css responsive-design grid amp-html

【解决方案1】：

如果您有图像的动态宽度并且想要处理这种情况，请访问此链接：https://ampbyexample.com/advanced/how_to_support_images_with_unknown_dimensions/ 并阅读“具有正确纵横比的固定高度布局”部分。当您不知道图像宽度并且不希望图像被拉伸时，它将帮助您实现 amp-img。

【讨论】：

【解决方案2】：

你可以这样做：

CSS

<style amp-custom>
    .magic-img { max-width:400px; margin: 0 auto;}
</style>

HTML

<div class="magic-img">
   <amp-img width="400" height="200" layout="responsive" src="https://xyx.com/abc.png"/>
</div>

【讨论】：