html - 使图像宽度适合跨度元素的长度？

Question

我有一个inline-block包含一个image和一个span元素的 div。

这是标记：

<div class="inline-box">
    <img src="https://cdn.pixabay.com/photo/2020/03/22/15/25/fetch-4957501__340.jpg">
    <span class="text">Hallo XYZ</span>
</div>

这是结果：

我希望图像与 span 元素具有相同的大小，因此周围的内联块也应该具有 span 元素的大小。

所以这就是我想要的：

纯CSS可以吗？可以更改标记。这是一个jsFiddle。

附件：我知道可以使图像适合固定大小的 div

max-width:100%;
max-height:100%;
object-fit: contain;

如此处所述。但是，这里提到的 div 没有固定的大小，所以它不起作用。

标签： htmlcss