Как сделать текст и изображение в div одинакового размера ⇐ CSS

[Anonymous]

Я пытаюсь создать элемент div, содержащий изображение и текст поверх изображения. Текст будет иметь разный размер в зависимости от регистра, поэтому я хочу автоматически регулировать ширину изображения, чтобы покрыть текст.
До сих пор я пробовал следующее:

Код: Выделить всё

/* 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;
}

Код: Выделить всё

[img]imagePath[/img]

This is my text.

Буду очень признателен за любую помощь по этой теме.
Изменено:
Это то, чего я хочу достичь:
введите здесь описание изображения
И это если я используйте фоновое изображение:
введите здесь описание изображения

Подробнее здесь: https://stackoverflow.com/questions/787 ... -same-size