Html 内部有图像的复杂圆

我正在尝试创建一个圆圈，圆圈内有一个图像，圆圈底部有一个矩形

更容易解释的是：

小提琴：

我有点迷路了，我该怎么做圆圈底部的信息框呢

谢谢

代码：

HTML:

你需要

将图像包装在容器中

使容器位置：相对-这允许您相对于父div定位.caption div

相对于容器div的底部绝对定位矩形

HTML

---

Fiddle:

请记住，上述方法无法处理非方形的图像，但会弄乱图像比例。如果使用with元素表示语义，则会获得额外的分数。非常感谢jona、sea和barry！

<img class="wow rotateIn" src="http://lorempixel.com/250/250/">

img {
    margin: 10px 0 20px 0;
    width: 254px;
    height: 254px;
    border-radius: 50%;
    border: 2px solid #f98835; 
}

<div class="circle_image_box_with_caption">
    <img class="wow rotateIn" src="http://lorempixel.com/250/250/">
    <div class="caption">
        This is my caption text
    </div>
</div>

<figure class="circle_image_box_with_caption">
    <img class="wow rotateIn" src="http://lorempixel.com/250/250/">
    <figcaption class="caption"> <!-- don't need the class really since it's already a semantic element and can be targeted in css with .circle_image_box_with_caption figcaption -->
        This is my caption text
    </figcaption>
</figure>

.circle_image_box_with_caption {
    position:relative;
    width: 254px;
    height: 254px;

}
.circle_image_box_with_caption img {
    margin: 10px 0 20px 0;
    width:100%;
    height:100%;
    border-radius: 50%;
    border: 2px solid #f98835; 
}
.circle_image_box_with_caption .caption {
    position: absolute;
    bottom: -20px;
    border: 1px solid #ccc;
    width: 100%;
    text-align: center;
    padding: 10px 0px;
    background: #ccc;
}