如何在图片底部显示匹配宽度的标题？适配绝对定位图片的figure元素

我太懂这种无奈了——别人写的CSS动不得，图片用了position: absolute脱离文档流后，figure完全感知不到图片尺寸，导致标题没法和图片完美对齐。下面给你两个不用动图片absolute属性的可行方案：

方案一：纯CSS适配（适合响应式或固定比例图片） #

核心思路是让figcaption来撑起figure的宽度，同时让绝对定位的图片占满figure空间，这样标题自然就和图片同宽了。

修改你的CSS代码：

.fig {
  display: inline-block; /* 让figure收缩到内容宽度 */
  position: relative; /* 作为绝对定位图片的容器 */
  max-width: 100%; /* 适配响应式布局 */
}

.fig__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 图片占满figure宽度 */
  height: auto; /* 保持图片原始比例 */
}

.image-caption-text {
  width: 100%; /* 标题宽度与figure一致 */
  /* 用margin-top撑开figure高度，值为图片的宽高比百分比，比如16:9就写56.25% */
  /* 如果图片高度固定，直接写margin-top: [图片高度]px即可 */
  margin-top: 100%; 
}

如果是比例不固定的响应式图片，也可以把margin-top换成padding-top来模拟高度占位，确保figure能正确撑开空间。

方案二：JS辅助（适合图片尺寸动态变化的场景） #

如果图片尺寸不固定，纯CSS没法精准匹配，就用JS主动获取图片实际宽度，同步给figure：

// 遍历所有目标图片
document.querySelectorAll('.fig__media').forEach(img => {
  // 图片加载完成后执行
  img.onload = function() {
    const parentFigure = this.closest('.fig');
    // 设置figure宽度为图片的自然宽度
    parentFigure.style.width = `${this.naturalWidth}px`;
  };
  // 处理图片已提前加载完成的情况
  if (img.complete) img.onload();
});

这个方法能确保figure宽度完全和图片一致，不管图片是本地还是远程资源，只要加载完成就能同步尺寸。

为啥之前加display: inline-block没用？ #

因为图片用了position: absolute后就脱离了文档流，figure内部没有任何能撑起宽度的元素，浏览器根本不知道图片的尺寸，自然没法让inline-block生效。上面的两个方案都是解决了“让figure感知图片尺寸”的核心问题——要么靠CSS占位，要么靠JS主动赋值。

内容的提问来源于stack exchange，提问作者Jeroen De Dauw