Javascript 如何在所有分辨率下使巨大图像上的文字保持在适当的位置？

在我的介绍页面中，我有一个非常大的图像，其高度和宽度适合所有分辨率（宽度超过4000px），我将其设置如下：

#source-image {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

然后，我在该图像上添加了一些具有以下样式属性的文本：

.description {
    position:absolute;
    top:510px;  
    left:23px;
    width:340px
}

在我的15.6英寸笔记本电脑上，它的分辨率为1366x768，看起来很不错（正如我希望的那样）

然而，当我的室友在他的高分辨率显示器上看到它时，描述并不在“正确”的位置。当然，我理解为什么会发生这种情况

我的问题是如何在所有分辨率中动态保持描述文本的正确位置？

---

非常感谢。

使用

职位：相对

用于包装图像的div，并且

位置：绝对设置与底部的距离，而不是与顶部的距离。或者设置为%

编辑：我将我的一个实验改编成一个例子：
描述的位置是相对于图像容器的
底部
和
左侧
设置的（图像正在填充其整个容器）

在第一种情况下，到图像容器的
左侧
和
底部
的距离是固定的，以px为单位

在第二种情况下，它们以%为单位，并在调整浏览器窗口的大小时发生变化

基本上，实现这一技巧的规则是

figcaption {
    bottom: 5px;
    left: 23px;
        /* more rules here */
}

在第一种情况下（固定距离，px）和

在第二种情况下（百分比）

另外，请注意，您不需要设置图像的
position:absolute
或
top
和
left
属性。
但是，您确实需要在描述框的父项上设置
position:relative


要使图像水平填充屏幕，您需要有
margin:0和
填充：0和
宽度：100%和
边距：0。我编辑了我的示例以反映这些更改

对于水平和垂直填充屏幕的图像，最简单的方法是甚至不使用img标记，只需将图像设置为主体的背景图像，并将html和主体元素的高度设置为100%

出于两个原因需要小心：一，这会使图像失真，并且在调整浏览器窗口的大小时会使其看起来很难看；二，如果需要图像下方的某些内容，则需要为外部元素指定位置：绝对，并将其设置为
顶部：100%
。这两个方面都可以在我链接的示例中看到。如果不需要，您只需删除图像下方的内容。
请设置百分比

选中水平中心设置的“示例-说明”框

第一次将相对位置设置为wraper div

.description {
    position:absolute;
    top:510px;  
    left:50%;
    width:340px;
    margin:0 0 0 -170px
}

使用蓝色分区的底部而不是顶部谢谢，但是图像如何完全适合屏幕？因为现在有一个全面的方面，我已经编辑了我的答案来解释这一点-见最后三段（在横线下）。我真的非常感谢你，我感谢你的帮助。不过我还有最后一个问题。尽管事实上，
figcaption
在所有分辨率上都非常有效，但我必须在
左侧有另一个块：830px
。这在我的1366分辨率笔记本电脑上非常正确。然而，在较大和较小的分辨率下（在某些情况下），这看起来很尴尬。在所有情况下，
figcaption
都会正确显示。您可以将%值设置为右侧，而不是左侧-尝试从类似
right:3%
的内容开始，使用不同的分辨率查看它的外观，上下调整3%值。您甚至可以尝试使用块的相对单位。
.description {
    position:absolute;
    top:510px;  
    left:50%;
    width:340px;
    margin:0 0 0 -170px
}