根据屏幕尺寸缩放图像

Question

我有两张专为1024 x 768分辨率设计的图像，我希望以更高的分辨率使用这些图像。这两个图像需要对齐，以便第一张图像中的圆圈位于第二张图像之间。

我使用我想要的分辨率，但问题是，对于更高的分辨率，图像不够大。我考虑使用公式((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;
}

Here is a jsfiddle.

这是我想要的效果的图像：

这是1920x1080中的图像：

Answer 1

您可以将图片设置为背景并使用background-size:contain。

Fiddle

在这种情况下，底部图像中的线应该向右移动一点，因此它可以均匀地缩放。

Answer 2

只需调整第二张图像的位置即可形成顶部。

JSfiddle

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