Centrer l'image entre les conteneurs tout en conservant la réactivité

Question

Comment ajouter une image par-dessus l'autre tout en conservant la réactivité ? J'ai besoin d'une image qui soit centrée entre une image et un conteneur. J'utilise Bootstrap.

Capture d'écran ci-jointe.

J'ai essayé différentes variantes avec float , position: absolute; et ainsi de suite, mais rien ne semblait fonctionner lorsque l'écran était redimensionné.

J'ai essayé de trouver des informations à ce sujet mais, franchement, je n'ai aucune idée de la manière de formuler le problème pour trouver une réponse.

Lien : http://euro-tax.connectmedia.ro/

Answer 1

Avec position:absolute vous pouvez utiliser calc pour définir la position d'un élément. Il suffit d'effectuer quelques calculs. Dans votre cas, je mets left:calc(50% - 21px) Cela signifie que 50% - half-width of element . Cette fonction permet de positionner l'élément au centre de tout élément parent dans n'importe quelle fenêtre de visualisation.

div{
  position:relative;
}
.absoluteImage{
  position:absolute;
  bottom:15px;
  left:calc(50% - 21px);
}

<div>
  <img style="width:100%" src="http://euro-tax.connectmedia.ro/wp-content/themes/euro-tax/images/xheader-bg.jpg.pagespeed.ic.CWwqtcTBRJ.jpg">

  <img class="absoluteImage" src="data:image/webp;base64,UklGRm4BAABXRUJQVlA4TGEBAAAvKkAFEF9CEAgSyftj7TIEQbZNQeYv9oMQZNuUeee4s8K2bdtcZDvdzaxar35AAAIAIBAEwzCCBjA2jEAwGgcgGGiA4GMhmGgIDwIwGgMDD4IAggYwwAQAgRBMAKNhBEAQeEBsJEmRVL3H/H/MzMxMz9D++7MwPbsmRPQ/YdZuP4skvJOdnP/c6mQaXbavGXgmK3Nlu2sMWXkvwyuZpTdWhp+s/jXhkZp/rH5uWA588OLrs9wkdixnEbhHZiy3CYSnLA8puKX2LKdhgmn0WN6z0GfvLHsGmbAb3yw+KtBVPlh8N8iGU3yy+G9Btv5ZPIvkQElfWI78cPwjlpc0KVDja5bLKKzokuU6TipEcMLylA/lTywnQRKQRoe9dQyS0NW+2P2rRjpoCw92exRAOuhfz6w/v8AkHVxiK9atYrBIB7fAmOU4AJt0cG+z2oZCOniofrD1UYVKOnjJHX+POQjSAQA=" >
<div>

Answer 2

Essayez ceci :

Déplacer l'ancre hors de .bannerbox comme le HTML ci-dessous et ajoutez la classe show-more à elle.

Pour un affichage réactif, ajuster le background-position valeur de .bannerhead a .show-more valeur de la classe à ge media queries.

HTML :

<div class="bannerbox col-md-8">
  <h1>Recuperarea Taxelor si 
                Alocatiilor din strainatate</h1>

  <p style="font-weight:300;">Ai obtinut venituri din strainatate? Înseamna ca poti obtine restituirea impozitelor platite acolo.<br> Dar si alocatiile europene, ori alte taxe si asigurari pot fi recuperate. Afla acum ce drepturi ai si solicita înapoisuma maxima posibila.</p>

</div>
<a href="#section2" rel="m_PageScroll2id" class="_mPS2id-h mPS2id-highlight mPS2id-highlight-first mPS2id-highlight-last show-more"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAWCAMAAABuZ5WBAAAA5FBMVEXjHnL////jHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnL1kVINAAAAS3RSTlMAAAEDBAYHCAkNDxEUFxoeIyQnMDM3OTxBS0xQVltcYG11eYCFh5OVlpmepKq2uLq7v8TFyMnQ0dLW2Nzj5Ofs7/P09vj5+vv8/f6BxUE3AAABG0lEQVQoz43T11bCYBAE4NlQpKN0hUhXqlIs9GIowr7/+3hBsqSQHPcqM/Odk6sfgLo8vifgdkREibfj8pkISoOZeZH2sOkFM3NDQYuZmfnnydU+bi+khd3lg08VF1s56WKHMRv36rtBfS+yjxH/lNAPO2i4L+tHHAj1JH4nbTT5JVsvRACUphSrjIVmVrI0FSIAQPlgVFrRRIuaUR/KRLpFYWO056rQ6tkoNwW6WqTm8re2HwDgb0szT5HZIjaSaRABEBlIHsXIahHsyjjN3eWmkrpBslsodb51dYWcFlD3DrlXiW5a5Nc2us7DzeJhZqGze7hbRIcmOozCyyLQEdoJwNsCNZ3Wrm/I1aKkMbNWwn8sspPfSRZO+wc672iCowb7mQAAAABJRU5ErkJggg=="
    class="center-block" style="padding-bottom:10px;" data-pagespeed-url-hash="1407470906" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"></a>

CSS :

.bannerhead {
  background-image: url("/wp-content/themes/euro-tax/images/xheader-bg.jpg.pagespeed.ic.CWwqtcTBRJ.jpg");
  background-size: cover;
  background-position: center 68%;
  position: relative;
}

.show-more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

Answer 3

Set (jeu de mots) position:relative à l'intérieur de l'élément parent

div.bannerhead {
  position: relative;
}

Ensuite, définissez l'élément enfant comme suit :

<div classs="bannerhead">
    <img class="center-block" src="" >
</div>

Définissez maintenant le CSS pour absolute ou l'élément enfant, quelque chose comme ceci :

img.center-block {
   position: absolute;
   bottom: -30px;
   left: 0;
   right: 0;  
   margin: 0 auto;
   z-index: 99;
   cursor: pointer;
}

Vous pouvez appliquer cette règle à l'intérieur de chaque nouvel élément. J'ai testé l'application de cette règle et cela fonctionne pour moi.

Answer 4

Vous pouvez essayer d'utiliser une grille. Créez une div contenant et placez votre conteneur, votre image et votre image en tant qu'enfants. Utilisez ensuite les propriétés de la disposition en grille pour les centrer.

Html

<div id="grid-container">
  <img src="#" id="img1">
  <img src="#" id="center-img">
  <div id="container"></div>
</div>

Css

#grid-container {
  display: grid;
  grid-template-rows: 1;
  grid-template-columns: auto 10px auto;
}

center-img {
  width: 10px;
  height: 10px;
}

Remarque : Cela ne fonctionnera pas avec n'importe quel navigateur actuellement, car la fonction de grille doit être activée manuellement.