根據屏幕尺寸縮放圖像

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 */
}