如何让文本在未知宽高的动态图片下方对齐且不超出图片宽度

可以通过让figure元素的宽度自适应图片宽度来实现，无需预先知道图片尺寸，仅用HTML和CSS即可完成：

修改后的CSS代码 #

.container {
  position: relative;
  text-align: center; /* 可选，让图片和文本整体居中 */
}

.reward-complete-image {
  max-width: 70vw;
  max-height: 70vh;
}

figure {
  display: inline-block; /* 让figure宽度收缩至图片的实际宽度 */
  margin: 0; /* 去除默认margin，可选 */
  text-align: left; /* 可选，设置文本对齐方式，可改为center/right */
}

替代方案（用fit-content） #

如果不想用inline-block，也可以用width: fit-content实现相同效果：

.container {
  position: relative;
}

.reward-complete-image {
  max-width: 70vw;
  max-height: 70vh;
}

figure {
  width: fit-content;
  margin: 0 auto; /* 让figure在容器中居中，可选 */
  text-align: left;
}

原理说明 #

• figure默认是块级元素，宽度会占满父容器，导致figcaption文本宽度不受图片限制。设置display: inline-block或width: fit-content后，figure的宽度会自动适配内部图片的宽度（图片受max-width限制不会超出视口）。
• figcaption作为figure的子元素，宽度会继承figure的宽度，因此文本自然不会超出图片的宽度范围。
• 你可以根据需求调整text-align属性，控制文本的对齐方式，也可以保留或去除居中相关的样式。

内容的提问来源于stack exchange，提问作者MMT