根据屏幕尺寸缩放图像

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

这是一个jsfiddle。

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

这是1920x1080中的图像：

Answer 1

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

小提琴

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

Answer 2

只需将第二张图像的位置调整为顶部。

的jsfiddle

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