Html amp img中的响应式布局设计

自从我实现了谷歌放大器，我就一直在努力解决这个问题。每次我添加的图像的

宽度

远小于我的网站

宽度

，

amp img

会自动添加边距以保持纵横比，如下所示：

我尝试过[官方文档]，（）中提到的其他布局，如

flex-item

例如，使用

flex item

，我可以在桌面版本中获得所需的行为，即减少图像的总边距，使其看起来像这样：

但在移动版本中，当图像比屏幕宽时，图像会左右溢出

当图像相对较小时，有没有办法通过查看

响应式布局

来删除如此大的边距

调查一下代码中的一些内容，问题似乎是由元素

i-amftml-sizer

引起的，这是google amp自动添加的元素，我无法控制它

我不会发布我的博客文章的url，以防它被认为是垃圾邮件，但如果出于某种原因你需要它，我会更新这个问题

更新 它有这个问题。

我解决了！阅读amp on，在具体的

amp html布局

一节中，在“大小”中有一个例子说：

在以下示例中，如果视口宽度大于320px，则图像宽度为320px，否则，图像宽度为100vw（视口宽度的100%）

这样，当屏幕宽度大于图像宽度时，图像将具有其原始宽度，否则图像将

100%

<amp-img src="https://acme.org/image1.png"
    width="400" height="300"
    layout="responsive"
    sizes="(min-width: 320px) 320px, 100vw">
</amp-img>

<figure>
  <amp-img 
     on="tap:lightbox1" 
     role="button" 
     tabindex="0" 
     layout="responsive" src="/img/securitynow.jpg"
     width="100"
     height="100">
  </amp-img>
</figure>

<figure>
  <amp-img
     sizes="(min-width: 100px) 100px, 100vw" 
     on="tap:lightbox1" 
     role="button" 
     tabindex="0" 
     layout="responsive" src="/img/securitynow.jpg"
     width="100"
     height="100">
  </amp-img>
</figure>

 sizes="(min-width: withOfImage) WithOfImage, 100vw"