在figure标签中，如何使figcaption标签的宽度居中并与图像对齐？

Question

我已经花费了两天时间尝试解决一个关于fig/figcaption的问题，但一直没有成功。

我有一个Django应用程序，用户可以提交图片。我正在使用figure和figcaption标签来显示图像及其相应的标题。主要问题是标题的宽度超过了图片的宽度。

我正在试图找到一种方法让图片保持原大小，使标题的宽度相应地对齐。我也在使用Twitter-Bootstrap。我接受任何解决方案。非常感谢任何意见和建议。

更新：这是实际的HTML模板代码和CSS：

        <div class="span4 offset2">
                {% if story.pic %}
                    <h2>Image</h2> 
                    <figure width="{{story.pic.width_field}}">
                    <img class="image"src="{{ story.pic.url }}" width="{{story.pic.width_field}}" alt="some_image_alt_text"/>
                    {% if story.caption %}
                        <figcaption>
                                                {{story.caption}}
                        </figcaption>
                    {% endif %}
                    </figure>
                {% endif %}
        </div>


 image {height:auto;}

 figure {margin:0; display:table;} 

figcaption {display:table-row;
max-width: 30%;
font-weight: bold;}

- Why Not

---

你是否将 img 设置为百分比的 width？还是没有设置任何 width？我猜测你已经将 img 设置为 width: 100%。 - ScottS

Answer 1

原始解决方案

figure .image {
    width: 100%;
}

figure {
    text-align: center;
    display: table;
    max-width: 30%; /* demo; set some amount (px or %) if you can */
    margin: 10px auto; /* not needed unless you want centered */
}

关键是为figure元素中的img设置某种max-width，如果可以的话，它将使其和文本都保持约束。

查看示例fiddle。

如果您正在以编程方式读取宽度

首先，这个<figure width="{{story.pic.width_field}}">应该改为<figure style="width: {{story.pic.width_field}};">。

其次，仅需执行此CSS（对于img或figcaption不需要其他操作;请参见 fiddle）：

figure {
    text-align: center;
    margin: 10px auto; /* not needed unless you want centered */
}

即使是带有长文本的真正小的图像仍然会存在问题，如此演示了这个例子。为了使其看起来更干净，您可以检查一些最小img尺寸，如果它太小（比如100px），则不要在figure上设置width，而是将min-width设置为img的大小，并将max-width设置为您的阈值100px，就像这个示例中所展示的。

- ScottS

---

好的。我添加了您的设置，最大宽度为50％，只是为了查看。图像大小适应div的宽度，有点奏效。文本最终确实换行了。但是较小的图像远远超出其原始大小（我认为这与figure .image CSS有关。有没有办法保持实际比例一致？我不确定最大宽度的百分比差异实现了什么。否则是个好答案。 - Why Not

此外，图像缩放到100％会阻止新上传的图像出现。非常奇怪。将其删除后，这些图像就会再次显示。 - Why Not

@WhyNot--你不必使用百分比的max-width。你可以设置像素值。不确定你的情况，但理想情况下，如果你能够在问题上获取图像宽度，那么你可以直接在figure中使用style属性设置width，并从css中删除100%的图像宽度和max-width。在figure上设置width或max-width可以实现保持figcaption与img相同大小或更小，这正是你所期望的。 - ScottS

我根据你的建议更新了上面的代码。但是，当图片小于div的宽度时，标题仍无法正确地环绕图片。真令人沮丧。已经过去大约9个小时了。 - Why Not

@WhyNot--我不确定你在说什么，因为你已经将宽度设置为相同的值，所以“图片小于div的宽度”不应该出现。但是，可能是你设置了display: table，这种方法将不再需要。请查看我的答案的更新。 - ScottS

Answer 2

这个问题的解决方案是使用表格和标题(TABLE和TABLECAPTION)，只需两行代码即可。

您可以在以下网站上查看此解决方案的实时预览： http://www.sandrasen.de/projektgebiete/kienheide/

figure { 
  display: table; 
}

figcaption { 
  display: table-caption; /* aligns size to the table of the figure
  caption-side: bottom /* makes the caption appear underneath the image/figure */
}

- alboth - undkonsorten.com

Answer 3

在HTML5中，事情非常简单：

HTML

<figure>
    <img src="..." >
    <figcaption>Caption 1</figcaption>
</figure>
<figure>
    <img src="..." >
    <figcaption>Caption 2</figcaption>
</figure>

CSS

figure{
  display: inline-block;
}

/* optional, use as required */
figcaption { 
  max-width: 30%;
  caption-side: bottom;
}

- lifebalance