如何将图像标题宽度与图像宽度匹配？

Question

我正在尝试给这个元素添加样式：

<div class="figure">
  <img src="/some/image.jpg">
  <p class="caption">
    <span class="caption-text">Some caption of any length</span>
   </p>
</div>

为了让标题在与图片同宽的阴影框中，需要注意的是.figure有时可能在表格中的<td>内，如果有这种情况。此外，它不应超过父元素的宽度（必要时缩小图像）。

以下是目前的内容：

.caption-text {
  font-size: 14px;
  font-family: Lato, proxima-nova, 'Helvetica Neue', Arial, sans-serif;
  font-weight: normal;
  line-height: 0px;
}

.figure {
  max-width: 100%;
  display: inline-block;
  position: relative;
}

.figure img {
  vertical-align: top;
  margin-bottom: 3px;
}

.caption {
  display: block;
  width: 100%;
  position: absolute;
  padding: 10px;
  background-color: #e3e3e3;
  box-sizing: border-box;
  margin: 0;
}

<div style="width:500px">
  <h1>Some Title</h1>

  <!--part I want to style-->
  <div class="figure">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
    <p class="caption">
      <span class="caption-text">Some caption of any length. Should wrap and push content down when longer than the image.</span>
    </p>
  </div>
  
  <p>Some text which should always go below the caption. When positioned absolutly the caption overlays this text, instead of pushing it down below.</p>

</div>

问题在于将.caption设为position:absolute;会使它不再影响其他元素的流动，因此它会覆盖在其下方的内容而不是将其向下推。由于html标记是自动生成的，我无法对其进行任何编辑，因此我想知道是否可以使用纯CSS实现这一点。

- gandalf3

Answer 1

你可以使用CSS的display:table + table-caption解决方案。

.figure {
  display: table;
  margin: 0;
}

.figure img {
  max-width: 100%;
}

.figcaption {
  display: table-caption;
  caption-side: bottom;
  background: pink;
  padding: 10px;
}

<h3>Example of small image</h3>
<figure class="figure">
  <img src="//dummyimage.com/300x100" alt="">
  <figcaption class="figcaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
</figure>

<h3>Example of large image</h3>
<figure class="figure">
  <img src="//dummyimage.com/900x100" alt="">
  <figcaption class="figcaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
</figure>

此外，为了去除图片下方的微小空白，您可以使用以下任一方法：

.figure img { vertical-align: middle; } 或 .figure img { display: block; }

有关更多详细信息，请阅读这个答案。

- Stickers

---

当我将图片设置为链接时，发现图片下方出现了额外的填充，这是由于图像的内联特性导致的。通过在figure img选择器中添加display: block属性，问题得以解决。 - Malvineous

@Malvineous 说得好，我在答案中增加了更多信息。 - Stickers

Answer 2

我提供了一种更通用的选项，它不需要表格布局。这意味着您可以添加更多子元素而无需担心表格布局会对它们产生影响。您还可以选择哪些子元素将“扩展”容器，哪些子元素不会。

它所要求的仅是外部元素为display: inline-block;、position: absolute;或任何其他“收缩到适合”类型的节点。

.container {
  display: inline-block;
}

.no-expand {
  box-sizing: border-box;
  width: 0px;
  min-width: 100%;
  
  background: pink;
  padding: 10px;
}

<h3>Example of small image</h3>
<div class="container">
  <img src="//dummyimage.com/300x100" alt="">
  <div class="no-expand">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>

<h3>Example of large image</h3>
<div class="container">
  <img src="//dummyimage.com/900x100" alt="">
  <div class="no-expand">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>

- JS_Riddler