Place text inside an amp-img with layout="responsive"

Question

I have an amp-img with layout="responsive" and I need to place some text inside it, or on top of it, if you prefer to say it that way. The amp-img will fill the width of the screen and the height will be determined by amp-img so that the entire image is visible and the aspect ratio is maintained.

Is there a way to do this?

I could place the image in the background, but I would lose the responsive sizing provided by amp-img. I have tried this using a background-size of cover or contain, but I the image always ended up being cropped, either on the right or the bottom.

I also tried placing the text with position:absolute, but can not get the text on top of the image. Here is one attempt, which ends up with the text below the image:

<div style="position:relative">
<amp-img src="/images/@Model.ImageUrl" layout="responsive" width="1920" height="1080" alt=""></amp-img> @* 16 x 9 *@
<div class="clearfix" style="padding-top:25%; padding-bottom:10%; position:absolute; z-index:1">
    <div class="mx-auto md-col-9">
        <h2 class="tx-g2 tx-center ml-1 mr-1 shadow mb-0" style="{text-transform:uppercase;}">
            <amp-fit-text width="400" height="20" layout="responsive" max-font-size="75">
                @Html.Raw(Model.Title)
            </amp-fit-text>
        </h2>
    </div>
</div>
</div>

Is there a way to get the image sized correctly and also place text on top of it?

PS. Will someone create a tag for amp-fit-text.

user2468968 · Answer 1 · 2019-02-08T06:15:27.433

Your <div> containing <amp-fit-text> is missing a width. See a simplier example below.

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title> Hello World</title>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-custom>
  </style>
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
    <div style="position: relative;">
        <amp-img src="https://omoiwords.com/stories-poster.jpeg-2048.jpeg" 
            width="1228" height="819" layout="responsive"></amp-img>
        <div style="background-color: rgba(0,0,0,0.7); 
            color: white; width: 80%; position:absolute; top:10%; left: 10%;">
            <amp-fit-text 
                width="200" height="50" layout="responsive">
                Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
                Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
            </amp-fit-text>
        </div>
    </div>
</body>
</html>

What am I missing? I think my amp-fit-text has a width of 400. There must be something else that makes your work while mine fails. — Jim S, Feb 08 '19 at 15:38
The elements containing your amp-fit-text, not the amp-fit-text. I.e., the container your element is responsive to. — user2468968, Feb 08 '19 at 16:25
I think I see. My SEO guy wants that h2 in there, but it's another element that's separating the amp-fit-text from the width (class 'md-col-9') that's on the containing div. Thanks for your help! — Jim S, Feb 09 '19 at 17:20

score 2 · Answer 2 · answered Apr 08 '20 at 11:10

<div style="position: relative;">
    <amp-img src="https://omoiwords.com/stories-poster.jpeg-2048.jpeg" 
        width="1228" height="819" layout="responsive"></amp-img>
    <div style="background-color: rgba(0,0,0,0.7); 
        color: white; width: 80%; position:absolute; top:10%; left: 10%;">
        <amp-fit-text 
            width="200" height="50" layout="responsive">
            Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
            Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
        </amp-fit-text>
    </div>
</div>

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

Please don't forget to add the script. – Dr. Abhishek Apr 08 '20 at 11:19 — Dr. Abhishek, Apr 08 '20 at 11:19

score 0 · Answer 3 · answered Feb 08 '19 at 15:48

I have found a workaround using amp-carousel with a single slide:

<amp-carousel layout="responsive" height="1080" width="1920" type="slides" style="position:relative;">
<div  style="background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
            url(/images/@Model.ImageUrl);
        background-size:contain; background-repeat:no-repeat; width:100%; height:100%;">
    <div class="clearfix" style="padding-top:25%; padding-bottom:10%;">
        <div class="mx-auto md-col-9">
            <h2 class="tx-g2 tx-center ml-1 mr-1 shadow mb-0" style="{text-transform:uppercase;}">
                <amp-fit-text width="400" height="20" layout="responsive" max-font-size="75">
                    @Html.Raw(Model.Title)
                </amp-fit-text>
            </h2>
        </div>
    </div>
</div>

Place text inside an amp-img with layout="responsive"

3 Answers3