html-在图像上显示内容

我有一个<div>包含任意数量的内容和图像。该图像将作为所有内容的背景。我需要发生以下事情：

• 内容可以选择在背景图像中垂直居中
• 如果内容比图片短，则包装容器的高度将符合图片
• 如果内容比图像长，图像将照常显示，但内容将流入图像下方的空白处。

我目前处理这个问题的方式是制作内容position: absolute并将其定位在图像上。这会检查列表中的前两项，但是第三项失败。内容将遇到任何后续或只是被切断。

一种解决方法是将 移动position: absolute到图像。这支持最后一种，一种支持第二种，但不完全支持第一种。如果内容比图像长，一切正常，一切都很好。如果内容较短，则图像将获得内容的最大高度。图像需要始终以完整尺寸显示，并且仅受宽度限制，而不受高度限制。

我知道这可以通过将元素的高度设置为内容或图像的最大值来使用 JavaScript 来解决，但如果可能的话，我想采用纯 CSS 方法。

所以我的问题是，这可以仅使用 HTML 和 CSS 来完成，还是我需要将 JavaScript 纳入等式？