Html 如何在高度变化的图像下方定位div？

在我的新网站中，我有一个设置为100%宽度的图像，然后在它下面有一些文本。如何根据图像的高度更改文本的位置

.pic{
位置：绝对位置；
左：0；
宽度：100%；
}
.pic img{
位置：绝对位置；
宽度：100%；
}
.文本{
位置：相对位置；
边缘顶部：10px；
}

一些重要信息

请尝试以下操作：

删除所有css并仅添加

.pic{
    width:100%;
}
.pic img{
    width:100%;
}
.text{
    margin-top:10px;
}

---

您定位HTML元素的方式是错误的。请更正。

请分享您的工作。这正是我试图实现的目标，但我仍需要将我的图片调整到屏幕宽度。从答案中打开相同的链接。