Imbrication d'une image sur un autre dans twitter bootstrap

Question

Je tente d'imbriquer une image par-dessus une autre (en utilisant Twitter bootstrap) le problème est que lorsque je redimensionne mon navigateur, l'image de la flèche n'est pas toujours localisée (voir le image)

Il était censé être:

mais quand le redimensionnée navigateur:

et le code est:

<div class="container"> 
<div class="row"> 
    <div class="col-lg-4"> 
     <div> 
      <img alt="" src="../images/fulltime.png" class="img-responsive" /> 
      <img alt="" src="../images/arrow.png" class="img-responsive" style="position: absolute; top: 170px; left: 341px" /> 
      <label style="position: absolute; top: 12px; left: 43px; font-size: 19px; font-family: Trebuchet MS; 
       color: White;"> 
       Professional 
      </label> 
      <p style="position: absolute; top: 80px; left: 25px; font-size: 13px;"> 
       random text 
       <br /> 
       random text 
       <br /> 
       random text 
      </p> 
     </div> 
    </div> 
    </div> 
</div> 

Qu'est-ce que je fais mal ici? Ou n'est-ce pas possible?

Note: Je viens de changer mon récent web avec bootstrap, donc je suis nouveau dans ce domaine et j'utilise bootstrap v3 si ça aide.

Merci.

Answer 1

trouvé la solution, il suffit d'ajouter img-responsive classe, dans la balise <div class="col-lg-4">

rendant <div class="col-lg-4 img-responsive">

les séjours d'image « intacte » maintenant, peu importe la façon dont l'écran du navigateur sont redimensionnée, cheers!

Answer 2

Au moment où vous utilisez top: 170px; left: 341px ou en disant aller 341px à partir de la gauche et 170px à partir du haut. Si vous le positionnez en bas et à droite au lieu de haut et de gauche, alors il sera ancré dans le coin inférieur droit et vous direz: "Tant de px du bas et tant de la droite"

Donc au lieu de:

<img alt="" src="../images/arrow.png" class="img-responsive" style="position: absolute; top: 170px; left: 341px" /> 

quelque chose comme:

<img alt="" src="../images/arrow.png" class="img-responsive" style="position: absolute; bottom: 50px; right: 19px" /> 

changer les numéros en fonction mais notez le top est maintenant bottom et left est maintenant right