jquery - 响应式和绝对定位

Question

我需要一些帮助/想法来解决这个问题......

我有一个PSD设计。尺寸：1504x1070

我必须制作一个比例相同的 HTML/CSS 模板。我在 jQuery 中使用了“三规则”来根据我的屏幕分辨率调整元素的大小和位置。

问题是Image2 在 Image1 之上...而且它应该在它之下。

我已经在我的 css 中设置了这个规则，并且图像高度可以调整大小：max-width: 100%

这是我的jQuery代码：

// Image1 width in PSD: 496 , height to top in PSD: 154
// Image2 width in PSD: 374 , height to top in PSD: 493
// Call for Image1 div container: calculateWidth(496); calculateTop(154)
// Same for Image2 div container.


function calculateWidth(px){
    var width = $(window).width();

    var design_width = 1504;

    var step1 = width * px;
    var step2 = step1 / design_width;

    return step2;
}

function calculateTop(px){
    var height = $(window).height();

    var design_height = 1070;

    var step1 = height * px;
    var step2 = step1 / design_height;

    return step2;
}

知道如何得到这个吗？谢谢！

编辑： 我制作了一张简单的图片，您可以在其中看到问题：

http://cl.ly/image/3l2y0k1U2W2j