I am facing an issue with two images that are created for a 1024 x 768 resolution but I need to use them in a higher resolution. The challenge is to align these two images so that the circle from the first image falls between the second image.
Although I have managed to adjust the resolution as needed, the problem arises when using a higher resolution where the image appears smaller than desired. I tried setting the width of the images using the formula
((100 - ($(window).width() - 1024) / 1024 * 100) + 100)Below is the current code snippet:
<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;
}
You can view the demonstration on this jsfiddle link.
Here is an illustration of my intended effect:
And here is how the image appears in 1920x1080 resolution: