I am using amp-story-grid-layer and setting the template to "fill". My background image is in the aspect ratio of 16:9 (1920 in height and 1080 in width). When I display the background in my amp-story-grid-layer, the top and bottom of the image is cut off by the viewing layout of the amp story. (~approximately 50 px is missing from the top and bottom ) Is AMP story suppose to be shown in 16:9? The story seems to have a width wider than 16:9.
1
votes
1 Answers
1
votes
AMP stories are shown at the size of the user's browser window. Although many phones are 16:9 (or, rather, 9:16 in the portrait orientation), some of that space is often taken by browser toolbars and the likes, leaving the effective available space less tall than 9:16. And, of course, there are phones that were just not 9:16 to begin with.
On desktop or tablet landscape UIs, amp-story shows up to three amp-story-page elements at a time. These are shown at a 3:5 aspect ratio (which is equivalent to 9:15; again, slightly shorter than 9:16).
In any case, you will need to be a bit flexible with having some part of the image cropped, in order for it to be truly full bleed. Your options are:
- Change nothing; top/bottom of image will likely be cropped
- Use a wider aspect ratio for your images; left/right sides of image will likely be cropped
- Use
template="vertical"for your layer, andlayout="responsive"for your image, and center it with CSS; you will have letterboxing at the top/bottom of your image - Use
template="vertical"for your layer, andlayout="height-responsive"for your image, and center it with CSS; you will have letterboxing at the left/right of your image - Stretch the image, with 100% width and height; this will distort the appearance of your image
Unfortunately, for your UI to be responsive, you will need to choose which one of these scenarios suits you best.
