Javascript 根据屏幕大小缩放图像

我有两个图像是为1024x768分辨率设计的，我想在更高的分辨率中使用。两个图像需要对齐，以便第一个图像中的圆位于第二个图像之间

我得到了我想要的分辨率，但问题是，对于更高的分辨率，图像不够大。我考虑使用公式

（（100-（$（window.width（）-1024）/1024*100）+100）设置图像的宽度。但问题是，这并不能正确地排列图像

这是我当前使用的代码：

<div id="helperLines" class="lines">
    <img src="HelperLines.png" alt="HelperLines" />
</div>

<div id="startingLine" class="lines">
    <img src="StartingLine.png" alt="StartingLine" />
</div>

.lines
{
    position: absolute;
}

#helperLines
{
    top: 0px;
    left: 0px;
}

#startingLine
{
    left: 97px;
    bottom: 0px;
}


.台词
{
位置：绝对位置；
}
#求助热线
{
顶部：0px；
左：0px；
}
#起始线
{
左：97px；
底部：0px；
}


下面是我想要的效果的图像：

这是1920x1080中的图像：
只需调整第二张图像的位置，使其也位于顶部即可


您可以将图像设置为背景，并使用
背景大小：contain


在这种情况下，底部图像中的线应该向右移动一点，以便均匀缩放。
如果希望它们始终对齐，为什么不使用1个图像而不是2个图像？因为我需要淡入第一个图像（使用jQuery）然后淡入第二幅图像。你可以用它制作两幅大小相同的图像，并将它们都赋予
top:0；左：0
。抱歉，我忘了说底部图像必须始终位于底部。
#startingLine
{
    top:265px; /* approx */
    left:95px; /* approx */
}