在图片底部显示图片标题

Question

我试图在图片底部显示图片标题。

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

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

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

我进行了一些搜索，发现通常需要按照建议here添加display: inline-block。这对此无效。我怀疑这是因为图像本身具有position: absolute的CSS。如果我删除该位，布局就会中断。 （不是我的CSS，我不是网络开发者。）所以我觉得即使图像使用绝对位置，我也需要一种方法来调整<figure>的大小。或者其他一些正确定位标题的方法。

Answer 1

我建议对position: absolute; figcaption而不是img figure可以采用宽度 img

＆＃13;

＆＃13;

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

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;