在图像底部显示图像标题

Question

我正在尝试在图片底部显示图片说明。

这就是我目前所拥有的。标题应该位于图像的底部并与其宽度相匹配。它不这样做的原因是因为包含图像的<figure> 没有调整大小以匹配图像。

<figure class="fig">
    <img src="http://such.url" class="fig__media"/>

    <figcaption class="image-caption-text">Some caption</figcaption>
</figure>

我做了一些搜索，发现通常您需要添加display: inline-block，正如建议的here。这在这里没有影响。我怀疑这是因为图像本身具有带有position: absolute 的CSS。如果我删除那个位，布局就会中断。 （不是我的 CSS，我也不是网络开发人员。）所以即使图像使用绝对位置，我似乎也需要一种方法来让 <figure> 调整大小。或其他方式来正确定位标题。

Answer 1

我建议像position: absolute; 那样为figcaption 而不是img 那样figure 可以采用img 的宽度

figure {
  border: 1px solid;
  display: inline-block;
  margin: 0;
  position: relative;
}

figcaption {
  position: absolute;
  bottom: 1em;
  left: 0;
  background-color: yellow;
  width: 100%;
}

<figure class="fig">
    <img src="http://placehold.it/500x200" class="fig__media"/>

    <figcaption class="image-caption-text">Some caption</figcaption>
</figure>