Scale image according to screen size

Question

I have two images that are designed for a 1024 x 768 resolution which I want to use in a higher resolution. The two images need to line up so the circle from the first image is inbetween the second image.

I got it working with my desired resolution but the problem is that for higher resolution the image is not big enough. I thought about setting the width on the images using the formula ((100 - ($(window).width() - 1024) / 1024 * 100) + 100) . The problem though is that this doesn't line the images up correctly.

This is the code i'm currently using:

<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;
}

Here is a jsfiddle.

Here is a image of my desired effect:

And here is the image in 1920x1080:

Answer 1

You could set the images as background and use background-size:contain .

Fiddle

In this case the line in the bottom image should be shifted to the right a bit, so it scales evenly.

Answer 2

Just adjust the postioning of the second image to be form the top as well.

JSfiddle

#startingLine
{
    top:265px; /* approx */
    left:95px; /* approx */
}