将Bootstrap进度条转换为圆形，并在其中放置图像

Question

我正在尝试使用Bootstrap进度条，使其能够在图像周围以圆形包裹的方式显示。如下所示的HTML代码中，我仍然希望按照Bootstrap的方式在div中设置宽度。

“问题”：我如何使用Bootstrap进度条来将其包装在我的图像周围，并仍然能够在div中设置进度条？

这是我迄今为止尝试过的内容：片段示例 Codepen

CSS

.progress {
    border-radius: 50%;
} 
.progress-bar {
    border-radius: 50%;
}
.wrapper > img {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
}

HTML

<div class="container">
    <div class="row">
        <div class="page-header">Circle progress bar with image</div>
    </div>
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3">

            <div class="wrapper">

                <img src="holder.js/150x150" class="img-circle img-thumbnail" />  

                <div class="progress" style="height: 150px; width: 150px;">  
                    <div class="progress-bar" style="width: 50%"></div>  
                </div>  

            </div> 

        </div>
    </div>
</div>  

- user4419336

---

不是Bootstrap，但可以看一下这个网址：http://codepen.io/geedmo/pen/InFfd - Owen

@wolfgang1983 抱歉，我粘贴了错误的链接，我认为https://dev59.com/5GYq5IYBdhLWcg3wwDNA可以给你一些关于如何实现它的想法... - Al Foиce ѫ

@AlFonce我想我会选择Mi-Creativity的想法。 - user4419336

Answer 1

您可以使用“自动”SVG圆形来实现此目的，自动是因为您不需要硬编码值，如宽度、高度、半径或viewBox尺寸，所有这些只需要相应的标签具有width和height属性，还有svg

- Mi-Creativity

---

我本来想尝试解决这个问题，但是我无法超越这个答案。非常棒的回答！ - Yasin Yaqoobi

谢谢，我相信你的尝试会变成这样甚至更好 :) - Mi-Creativity

谢谢您的贡献，您很可能会获得奖励。我会让它运行几天，以便给大家一个机会。 - user4419336

不用谢，这很公平。赏金的事情就按您喜欢的方式处理吧。对我而言，这个问题更多是一个小挑战，我很享受回答它的过程。谢谢你，祝你好运。 - Mi-Creativity