html - 在图像底部显示图像标题

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

的 width

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>