AMP истории отображаются в размере окна браузера пользователя. Хотя многие телефоны имеют формат 16: 9 (или, скорее, 9:16 в книжной ориентации), часть этого пространства часто занимает панели инструментов браузера и т.п., в результате чего эффективное доступное пространство становится меньше, чем 9:16. И, конечно, есть телефоны, которые не были 9:16 для начала.
В настольных или планшетных пользовательских интерфейсах amp-story отображает до трех amp-story-page элементов одновременно. Они показаны с соотношением сторон 3: 5 (что эквивалентно 9:15; опять же, немного короче, чем 9:16).
В любом случае, вам нужно быть немного гибким, чтобы какая-то часть изображения была обрезана, чтобы он был действительно полным кровотечением. Ваши варианты:
- ничего не менять; верх / низ изображения, вероятно, будет обрезан
- Используйте более широкое соотношение сторон для ваших изображений; левая / правая стороны изображения, скорее всего, будут обрезаны
- Используйте
template="vertical" для вашего слоя и layout="responsive" для вашего изображения и отцентрируйте его с помощью CSS; у вас будет почтовый ящик вверху / внизу вашего изображения
- Используйте
template="vertical" для вашего слоя и layout="height-responsive" для вашего изображения и отцентрируйте его с помощью CSS; у вас будет почтовый ящик слева / справа от вашего изображения
- Растянуть изображение, со 100% шириной и высотой; это исказит внешний вид вашего изображения
К сожалению, для того, чтобы ваш интерфейс реагировал, вам нужно будет выбрать, какой из этих сценариев подходит вам лучше всего.