プログレスバーにイメージを追加する

Question

私はブートストラップのプログレスバーを使用していますが、そのままプログレスバーが正常に動作しています。今度はプログレスバーの移動部分の前にイメージを追加したいと思います。バーが進むにつれてそのイメージを動かしたいと思います。続き

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

は、私はこれは私が私のバーが

enter image description here のように、このリンクを見てみたい方法です

.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 を使用していたCSSクラスです私は

を取得していますかを示して

この問題を解決する方法。

Answer 1

あなたは

.progress { 
    position: relative; 
} 

.progress img { 
    position: absolute; 
} 

を行い、その後、left:割合を設定することができます - 画像の幅/ 2

Answer 2

.progress { 
    position: relative; 
} 

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

JSFiddle