在图像底部显示图像标题

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。这在这里没有影响。我怀疑这是因为图像本身有 CSS 和 position: absolute。如果我删除那位布局中断。（不是我的 CSS 而且我不是网络开发人员。）所以我似乎需要一种方法来调整 <figure> 的大小，即使图像使用绝对位置也是如此。或者其他一些正确定位标题的方法。

Answer 1

我建议这样做 position: absolute; figcaption 而不是 img figure 可以采用 width[= img

的 26=]

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>

在图像底部显示图像标题

Display image caption on the bottom of the image

html

css

figure