2
votes

Placez le texte dans un amp-img avec layout = "responsive"

J'ai un amp-img avec layout = "responsive" et je dois placer du texte à l'intérieur, ou au-dessus, si vous préférez le dire de cette façon. L'ampli-img remplira la largeur de l'écran et la hauteur sera déterminée par amp-img afin que l'image entière soit visible et que les proportions soient conservées.

Y a-t-il un moyen de faire cela?

Je pourrais placer l'image en arrière-plan, mais je perdrais le dimensionnement réactif fourni par amp-img. J'ai essayé cela en utilisant une couverture ou un contenu de la taille de l'arrière-plan, mais l'image a toujours fini par être recadrée, soit à droite, soit en bas.

J'ai également essayé de placer le texte avec la position: absolue, mais ne peut pas obtenir le texte au-dessus de l'image. Voici une tentative, qui se termine par le texte sous l'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>

Existe-t-il un moyen de redimensionner correctement l'image et de placer du texte dessus?

PS. Quelqu'un va-t-il créer une balise pour amp-fit-text?

css-position amp-html background-image amp-img

0 commentaires

3 Réponses :

3
votes

Votre

contenant n'a pas de largeur. Consultez un exemple plus simple ci-dessous.

<!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>

3 commentaires

Qu'est-ce que je rate? Je pense que mon amp-fit-text a une largeur de 400. Il doit y avoir quelque chose d'autre qui rend votre travail pendant que le mien échoue.

Les éléments contenant votre amp-fit-text, pas le amp-fit-text. Par exemple, le conteneur auquel votre élément répond.

Je pense que je vois. Mon spécialiste du référencement veut que h2 soit présent, mais c'est un autre élément qui sépare le texte amp-fit-text de la largeur (classe 'md-col-9') qui se trouve sur le div contenant. Merci pour ton aide!

0
votes

J'ai trouvé une solution de contournement en utilisant amp-carousel avec une seule diapositive:

<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>

0 commentaires

0
votes

<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>

1 commentaires

N'oubliez pas d'ajouter le script.