在amp-img

Question

自从我实施了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遇到了这个问题。

Answer 1

我解决了！在documentation上阅读放大器github，在具体的<amp-img src="https://acme.org/image1.png" width="400" height="300" layout="responsive" sizes="(min-width: 320px) 320px, 100vw"> </amp-img> 部分，在“尺寸”中有一个例子说：

  

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

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

阅读AMP文档后：

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

现在它在所有屏幕尺寸上都能很好地显示：

为了处理各种图像尺寸，我遵循以下规则：

100%

这样，当屏幕宽于图像宽度时，图像将具有原始宽度，否则图像将为视口宽度的node 'webserver' { class { 'java' : distribution => 'jdk', package => 'java-1.8.0-openjdk-devel' } tomcat::install { '/opt/tomcat9': source_url => 'http://apache.osuosl.org/tomcat/tomcat-9/v9.0.0.M17/bin/apache-tomcat-9.0.0.M17.tar.gz', } tomcat::instance { 'tomcat9-1': catalina_home => '/opt/tomcat9', catalina_base => '/opt/tomcat9/1', } } 。