Comment mettre 2 zone de texte sur un fluide img? l'un en haut à gauche, l'autre en bas à droite - voir capture d'écran

Question

Je souhaite que deux zones de texte superposent une image imbibée d'un fluide imb-fluid dans le bootstrap 4. La première zone de texte sera en haut à gauche, chevauchant l'image d'environ 5%. L'autre devrait être en bas à droite, chevauchant également environ 5%.

Vous pouvez regarder ici à cette capture d'écran: layout

J'essayé plusieurs solutions, mais personne ne travaille ....

Voici le code html:

<div class="jumbotron jumbotron-fluid jumbotron-no-padding"> 
     <div class="jumbotron-img"> 


      <div class="jumbotron-img-caption-top"> 
       <h1>Hotel + Restaurant <span class="fraktur">Bürgerhof Wetzlar</span></h1> 
      </div> 

      <img src="img/wetzlar_full.jpg" class="img-fluid"> 

      <div class="jumbotron-img-caption-bottom"> 
       <h1>der perfekte Start für Ihre Tour in und um Wetzlar!</h1> 
      </div> 

     </div> 
    </div> 

et ici la css:

.jumbotron-no-padding { 
     padding: 0px!important; 
    } 

    .jumbotron-img { 
      position: relative; 
    } 

    .jumbotron-img img{ 
      position: absolute; 
      top: 5%; 
    } 

    .jumbotron-img-caption-top { 
      position: absolute; 
      top: 0%; 
      right: 20rem; 
      width: 100%;  
      background-color: #fff1c2; 
      padding: 1.5rem; 
      padding-left: 21.5rem; 
    } 
    .jumbotron-img-caption-bottom { 
      position: absolute; 
      top: 95%; 
      left: 20rem; 
      width: 100%;  
      background-color: #fff1c2; 
      padding: 1.5rem; 
    } 

    .jumbotron-imgn h2 { 
     line-height: 3rem; 
     vertical-align: middle 
    } 

Quelqu'un peut-il m'aider?

Answer 1

Que diriez-vous de quelque chose comme ceci. Je définis les enveloppes de texte à width:auto et définissant leur position à gauche ou à droite. Je définis le haut ou le bas à 0 et puis en utilisant transform:transplateY(-50%) pour compenser la hauteur des enveloppes de texte.

J'ai supprimé la position absolue de .jumbotron-img img car elle ne semblait pas nécessaire et provoquait une réduction de la hauteur .jumbotron-img afin que les éléments enfants positionnés en position absolue ne puissent pas se positionner correctement.

body { 
 
    padding-top:100px; 
 
    padding-bottom:100px; 
 
    margin:0; 
 
} 
 
img { 
 
    max-width:100%; 
 
    height:auto; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.jumbotron-no-padding { 
 
    padding: 0px!important; 
 
} 
 

 
.jumbotron-img { 
 
    position: relative; 
 
} 
 

 
.jumbotron-img-caption-top { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width:auto; 
 
    background-color: #fff1c2; 
 
    padding: 1.5rem; 
 
    transform: translateY(-50%); 
 
} 
 
.jumbotron-img-caption-bottom { 
 
    position: absolute; 
 
    top: 100%; 
 
    transform: translateY(-50%); 
 
    right:0; 
 
    width: auto; 
 
    background-color: #fff1c2; 
 
    padding: 1.5rem; 
 
} 
 

 
.jumbotron-imgn h2 { 
 
    line-height: 3rem; 
 
    vertical-align: middle 
 
}

<div class="jumbotron jumbotron-fluid jumbotron-no-padding"> 
 
    <div class="jumbotron-img"> 
 
    <div class="jumbotron-img-caption-top"> 
 
     <h1>Hotel + Restaurant <span class="fraktur">Bürgerhof Wetzlar</span></h1> 
 
    </div> 
 

 
    <img src="https://dummyimage.com/1920x1080/000000/0011ff" class="img-fluid"> 
 

 
    <div class="jumbotron-img-caption-bottom"> 
 
     <h1>der perfekte Start für Ihre Tour in und um Wetzlar!</h1> 
 
    </div> 
 
    </div> 
 
</div>