2

由于我已经实施了 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以便删除如此大的边距？

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

在此处输入图像描述

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

更新

似乎越来越多的人遇到了这个问题。

4

1 回答 1

4

我解决了！阅读github上的amp文档，具体来说是关于 的部分，在“尺寸”中有一个例子说：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%视口宽度。

于 2017-03-04T17:10:18.793 回答