진행률 표시 줄에 이미지 추가

부트 스트랩 진행률 표시 줄을 사용 중이며 진행률 표시 줄이 정상적으로 작동합니다. 이제 진행률 표시 줄의 움직이는 부분 앞에 이미지를 추가하고 바가 진행됨에 따라 그 이미지를 움직이기를 원합니다. 내가진행률 표시 줄에 이미지 추가

을 얻고 무엇을 다음

는

<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 클래스를 보여줍니다있다

이 문제를 해결하는 방법.

출처

2017-03-14 Rushil Ahuja

당신은 내가 좀 걸릴 수 JSFiddle에서 문제를 복제 할 수 있습니까? –

@EricGoncalves https://jsfiddle.net/ktqkrw9n/은 바이올린 링크입니다. 필요한 것은 내가 게시물과 공유 한 이미지에 있습니다. –

[JSFiddle] (https://jsfiddle.net/ktqkrw9n/3/)을 업데이트했습니다. –

당신은

.progress { 
    position: relative; 
} 

.progress img { 
    position: absolute; 
}

을 다음 left: 비율을 설정할 수 있습니다 - 이미지 너비/2

출처

2017-03-14 19:42:43 Masiama

.progress { 
    position: relative; 
} 

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

JSFiddle

출처

2017-03-14 20:00:19

진행률 표시 줄에 이미지 추가

답변

관련 문제