由于我已经实施谷歌AMP我正在努力解决这个问题。每次我用width远远超过我的网站width较小，amp-img添加图像自动添加利润率保持纵横比，这样的：[官方文件]中提到样式响应布局在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引起的，这是谷歌放大器自动添加并且我无法控制的元素。

我没有张贴的URL，在它被认为是垃圾邮件的情况下，我的博客文章，但如果由于某种原因，你需要它，我会更新的问题。

UPDATE

它seems more people是有这个问题。

来源

2017-03-03 elbaulp

我解决了！阅读github安培documentation，在混凝土上amp-html-layout的部分，在“大小”有一个例如说：

在下面的例子中，如果视口大于320像素宽，图像将是320像素宽，否则，它将是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-04 17:10:18 elbaulp

样式响应布局在amp-img

UPDATE

回答

相关问题