I have a div inline-block that contains an image and a span element.
This is the markup:
<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>
This is the outcome:
I would like that the image has the same size as the span element and thus the surrounding inline-block should also have the size of the span element.
So this is what I would like to have:
Is it possible with pure CSS? The markup can be changed. Here is a jsFiddle.
Enclosure: I know that one can make an image fit a fixed-size div with
max-width:100%;
max-height:100%;
object-fit: contain;
as explained here. However, the here mentioned div has no fixed size, so it won't work.
