【问题标题】：Styling responsive layout in amp-img在 amp-img 中设置响应式布局样式
【发布时间】：2017-03-07 05:14:47
【问题描述】：

自从我实施了 Google AMP 以来，我一直在努力解决这个问题。每次我添加一个width 远小于我的网站width 的图像时，amp-img 会自动添加边距以保持纵横比，如下所示：

我已经尝试过[官方文档]中提到的其他布局，(https://www.ampproject.org/docs/guides/responsive/control_layout#supported-values-for-the-layout-attribute) 比如flex-item。

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

但在手机版中，当图像比屏幕宽时，图像会左右溢出。

当图像相对较小时，有没有办法可以调整responsive layout 以消除如此大的边距？

调查了一下代码，问题似乎是由元素i-amphtml-sizer引起的，这是google-amp自动添加的元素，我无法控制。

我不会发布我的博客帖子的网址，以防它被视为垃圾邮件，但如果出于某种原因您需要它，我会更新问题。

更新

seems more people 遇到了这个问题。

【问题讨论】：

标签： html css responsive-images google-amp amp-img

【解决方案1】：

我解决了！在github 上阅读放大器documentation，具体来说是amp-html-layout 上的部分，在“尺寸”中有一个例子说：

在以下示例中，如果视口宽于 320px，则图像将为 320px 宽，否则为 100vw 宽（视口宽度的 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>

阅读 AMP 文档后：

<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"

这样，当屏幕宽于图像宽度时，图像将保持原来的宽度，否则图像将是视口宽度的100%。

【讨论】：