Html 将div设置为其子图像或背景图像的精确大小

我有一个图像，其中一部分包含一个样式化的屏幕。我希望文本显示在屏幕上。为了确保文本不会偏离屏幕，我需要根据图像的高度和宽度设置段落元素的尺寸

我已经这样做了，图像可以自动调整大小以适应窗口，而无需拉伸或滚动：

position: absolute;
max-width: 100%;
max-height: 100%;
height: auto;

但是IMG标签不能有子元素，所以我不能放置一个知道图像大小的子段落元素

因此，我的下一个想法是将IMG和段落元素都粘贴在包含DIV的内部。这样，DIV将扩展为图像的大小，段落可以基于该大小定位自身。但是DIV的大小只是0x0；它不会自动展开以包含图像。有没有办法使父DIV与其子IMG的确切大小一致

---

或者，我可以使用DIV的background image属性来包含图像，而不是IMG标记。但是，子段落元素是否有办法访问其父DIV背景图像的大小？

我不能100%确定我是否理解这个问题，代码示例会很有帮助……但是如果您的意思是在图像顶部放置一些文本，与图像大小相关，一个选项是绝对定位文本，并将其转换为与要查找的偏移相对应的百分比值：

.container {
   position: relative;
   display: inline-block;
   overflow: hidden;
   img {
      display: block;
   }
}

.copy {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   color: red;
   transform: translate(10%, 20%);
}

<div class="container">
   <img src="https://source.unsplash.com/random/900x400" alt="">
   <div class="copy">
      Some text
   </div>
</div>

.container{
位置：相对位置；
显示：内联块；
溢出：隐藏；
img{
显示：块；
}
}
.复制{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
颜色：红色；
转化：翻译（10%，20%）；
}
一些文本

---

工作示例：

“寻求调试帮助的问题（“此代码为什么不工作？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现这些问题所需的最短代码”。请提供答案。我不确定您希望我提供哪些其他信息。我不是在问为什么问题中的代码不起作用。图像的CSS是完美的；它正在调整自己的大小。我只是问我是否可以将它的父DIV设置为大小相等。你基本上是在展示一个。解决问题X可能比解决问题Y容易得多，在这种情况下，使用CSS无法解决问题Y。使用JavaScript是可能的，但是，这在很大程度上取决于您的具体情况，我们对此不太了解。