将图像添加到进度条答案

【问题标题】：Adding Image to the progress bar将图像添加到进度条
【发布时间】：2017-03-14 19:36:35
【问题描述】：

我正在使用引导进度条，进度条按原样工作正常。现在我想在进度条的移动部分前面添加一个图像，并且我希望该图像随着进度条的移动而移动。

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

以下是我正在使用的 css 类

.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 这就是我希望我的酒吧的样子

enter image description here 这个链接显示了我得到了什么

如何解决此问题。

【问题讨论】：

您能在 JSFiddle 中复制您的问题，以便我看一下吗？
@EricGoncalves jsfiddle.net/ktqkrw9n 是小提琴链接。所需的东西在我与帖子共享的图像中。
我已经更新了JSFiddle

标签： html css twitter-bootstrap progress-bar

【解决方案1】：

你可以做

.progress {
    position: relative;
}

.progress img {
    position: absolute;
}

然后设置left:百分比-图像宽度/2

【讨论】：

【解决方案2】：

.progress {
  position: relative;
}

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

JSFiddle

【讨论】：