Question

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

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

现在，如果主div为600像素，则图像将被拉伸到600像素（超过其正常的100％），但是对于主div为300像素的移动设备，图像将调整高度并完美显示很好，因为它将包含在300px的div中，将其拉伸到100％不会起作用。同样，无法将布局设置为固定，因为布局随后将延伸到移动显示器之外。有什么解决方案？

Answer 1

您可以这样做：

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>

Answer 2

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

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

2 个答案: