html - 带有图形说明的复杂圆框

Question

我这里有问题。

我有一个圆框，里面有一张图片，圆底有一个标题:

http://i.imgur.com/zfrWQW9.png

但是当我调整窗口大小时，会发生这种情况:

http://i.imgur.com/OxxH19y.png

我想在标题元素中设置一个固定宽度，但我无法设置它，因为标题有一个绝对位置。

我该如何解决？

代码:

HTML:

    <div class="col-md-4">
        <figure class="circle-image-box-with-caption">
            <img class="wow rotateIn" src="img/baresebaladas.jpg">
            <figcaption>
                <h2>ENTRADA VIP EM BARES E BALADAS</h2>
            </figcaption>
        </figure>
    </div>

CSS:

.about .col-md-4 {
    padding: 50px;
}
.about .circle-image-box-with-caption {
    position: relative;
}
.about .circle-image-box-with-caption img {
    margin: 10px 0 20px 0;
    width: 254px;
    height: 254px;
    border-radius: 50%;
    border: 2px solid #f98835; 
}
.about .circle-image-box-with-caption figcaption {
    width: 50px;
    position: absolute;
    padding: 0 20px;
    bottom: -40px;
    border: 1px solid #f98835;
    width: 100%;
    text-align: left;
    background: #f98835;
}

Answer 1

您需要在图形上使用 display:inline-block 以确保它收缩包裹图像

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.col-md-4 {
  padding: 50px;
}
.circle-image-box-with-caption {
  position: relative;
  display: inline-block;
}
.circle-image-box-with-caption img {
  margin: 10px auto 20px;
  width: 254px;
  height: 254px;
  border-radius: 50%;
  border: 2px solid #f98835;
  display: block;
}
.circle-image-box-with-caption figcaption {
  width: 100%;
  position: absolute;
  padding: 0 20px;
  bottom: -40px;
  border: 1px solid #f98835;
  width: 100%;
  text-align: left;
  background: #f98835;
}

<div class="col-md-4">
  <figure class="circle-image-box-with-caption">
    <img class="wow rotateIn" src="http://lorempixel.com/output/nightlife-q-c-254-254-8.jpg" />
    <figcaption>
      <h2>ENTRADA VIP EM BARES E BALADAS</h2>

    </figcaption>
  </figure>
</div>