如何让div内文本与图片尺寸匹配？实现图片自动适配文本宽度

我想创建一个包含图片和叠加文本的div，文本尺寸会根据场景变化，因此希望图片宽度能自动适配文本宽度，完全覆盖文本。以下是我目前尝试的代码：

现有代码 #

CSS #

/* Container holding the image and the text */
.cartContainer {
  width: max-content;
  position: relative;
  text-align: center;
  display: inline-block;
  margin: 0;
}

/* Centered text */
.cartTextCentered {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: fit-content;
}

.cartImg {
  max-height: 1.5rem;
  display: block;
  transform: translate(0, 0.1em);
  width: fit-content;
}

HTML #

<div class="cartContainer">
  <img class="cartImg" src="imagePath">
  <div class="cartTextCentered">
    This is my text.
  </div>
</div>

补充说明 #

• 预期效果：图片完全适配文本宽度，作为背景覆盖在文本后方，文本居中显示在图片上
• 使用background-image时的效果：背景图可以适配文本宽度，但希望用<img>标签实现类似效果

核心是让容器宽度由文本决定，再让图片占满容器空间，同时保证文本层级在图片上方：

修改后的代码 #

CSS #

.cartContainer {
  position: relative;
  display: inline-block; /* 宽度由内部文本撑开 */
  line-height: 1.5rem; /* 和图片max-height匹配，保证垂直对齐 */
}

.cartTextCentered {
  position: relative;
  z-index: 1; /* 确保文本在图片上方 */
  text-align: center;
  padding: 0 0.5em; /* 可选：给文本和图片边缘留空隙 */
}

.cartImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 完全继承容器宽度（即文本宽度） */
  height: 100%; /* 继承容器高度 */
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
  max-height: 1.5rem;
}

HTML（无需修改） #

<div class="cartContainer">
  <img class="cartImg" src="imagePath">
  <div class="cartTextCentered">
    This is my text.
  </div>
</div>

关键调整说明 #

• 容器用inline-block：让容器宽度由内部的文本（正常流元素）自动撑开，完美匹配文本宽度
• 图片设为绝对定位：脱离正常流，占满容器的宽高，实现对文本区域的完全覆盖
• object-fit: cover：保证图片按原有比例填充容器，不会被拉伸变形，同时裁剪超出部分
• 文本设置z-index:1：确保文本显示在图片上方，不会被遮挡

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