amp-story-grid-layer设置为填充，但图像从顶部和底部剪切

Question

我正在使用amp-story-grid-layer，并将模板设置为"fill“。我的背景图像的宽高比为16:9 (高1920，宽1080 )。当我在amp- story -grid-layer中显示背景时，图像的顶部和底部被amp故事的视图布局截断。(从顶部和底部大约缺少50像素) AMP故事应该在16:9显示吗？这个故事的宽度似乎比16:9更宽。

Answer 1

AMP故事以用户浏览器窗口的大小显示。尽管许多手机都是16:9 (或者更确切地说，纵向是9:16 )，但其中一些空间经常被浏览器工具栏等占据，有效可用的空间还不到9:16。当然，也有一些手机一开始就不是9:16。

在桌面或平板电脑环境UI上，amp-story一次最多可显示三个amp-story-page元素。它们以3:5的纵横比显示(相当于9:15；同样，略短于9:16)。

在任何情况下，你都需要对图像的某些部分进行灵活的裁剪，才能让它真正完全出血。您可以选择：

• 不做任何更改；图像的顶部/底部可能会被裁剪；图像的左/右可能会被裁剪；图像的左右两侧可能会被裁剪
• 使用template="vertical"作为层，layout="responsive"用于图像，并使用CSS居中；您将在图像的顶部/底部使用< letterboxing >H211
• 使用template="vertical"作为图层，layout="height-responsive"使用CSS居中；您将在图像的左侧/右侧使用信箱，宽度和高度均为100%；这将扭曲您的图像

的外观

不幸的是，为了使您的UI具有响应性，您需要选择这些场景中的哪一个最适合您。