Hinzufügen von Bild zum Fortschrittsbalken

Question

Ich benutze Bootstrap Fortschrittsbalken und die Fortschrittsanzeige wie es ist, funktioniert gut. Jetzt möchte ich ein Bild vor dem beweglichen Teil des Fortschrittsbalkens hinzufügen und ich möchte, dass sich das Bild mit fortschreitendem Balken bewegt.

<div class="flex-well-container"> 
         <div class="well well-lg" style="width:100%"> 
          <div class="progress"> 
            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 
            60% 
            </div> 
            <img src="../img/ProgressAvatar.png"> 
          </div> 

         </div><!--end well--> 

         <button class="btn btn-default btn-lg btn-play"><strong>Play Now</strong></button> 
</div><!--end flex-well-container--> 

Im Folgenden sind die CSS-Klassen, die ich

.progress{ 
    margin-bottom: 0px; 
} 
.flex-well-container{ 
    display: flex; 
    width:100%; 
} 
/*set the radius of the well to zero*/ 
.well-lg{ 
    border-radius: 0; 
} 

enter image description here Das ist bin mit, wie ich meine Bar wie

enter image description here Link aussehen wollen zeigt, was ich erhalte

So beheben Sie dieses Problem.

Answer 1

Sie können

.progress { 
    position: relative; 
} 

.progress img { 
    position: absolute; 
} 

machen und legen Sie dann left: Prozentsatz - Bildbreite/2

Answer 2

.progress { 
    position: relative; 
} 

.progress img { 
    position: absolute; 
    left: calc(60% - 50px); // percentage - .5 x width of image 
} 

JSFiddle