[likeclockwork]

I don't know what the intended treatment of the text is, but did you consider using an img element and stacking the text on top of it?

What you have is basically just an image element with width: 100 height: auto, but it has children.

Here's an example, written with tailwind for my convenience but should be pretty legible to anyone who knows CSS:

    <div class="grid place-items-center [&>*]:[grid-area:1/1]">
      <img
        src="https://picsum.photos/500/400?grayscale&blur=2"
        class="w-full h-auto"
      />
      <div>Hello.</div>
    </div>
    <div class="grid place-items-center [&>*]:[grid-area:1/1]">
      <img
        src="https://picsum.photos/500/400?grayscale&blur=2"
        class="w-full h-auto"
      />
      <div>Hello.</div>
    </div>
    <div class="grid place-items-center [&>*]:[grid-area:1/1]">
      <img
        src="https://picsum.photos/500/400?grayscale&blur=2"
        class="w-full h-auto"
      />
      <div>Hello.</div>
    </div>

The height of the container is governed by the height of the image (until the text becomes taller than the image). You still have fully fleixible in terms placement (place-self) and/or sizing (height: 100%) of the text container.

[hot_gril]

Yeah, that worked, thanks! I didn't think to try that, probably because I don't typically go towards absolute positioning (I'm sorta n00b), but it makes sense now.

[likeclockwork]

Using grid like this isn't absolute positioning, we still have implicit sizing and regular document flow. We're just assigning the elements to the same grid area and letting that area be sized by its contents.