Question

我有一个由JavaScript驱动的页面，该页面将用户桌面动态放置在平面图的背景图像上。我遇到的问题是布局图图像被拉伸以适合用户屏幕。现在，我需要一种方法来修改办公桌（带有背景图像的div）的大小和位置，以反映新的尺寸。

我所做的事情是创建一个函数，使我可以调整平面图与屏幕尺寸的比例：

function getResolutionRatio(){
    var width=$(window).width();
    var height=$(window).height();

    var location=-1
    //get floorplan image height and width

    var img=$("#bgImg")[0];
    if(img.naturalWidth){
        var imgW=img.naturalWidth;
        var imgH=img.naturalHeight;
        var ratioH=height/imgH;
        var ratioW=width/imgW;
        ratio={'h':ratioH, 'w':ratioW};
    }

这给了我1.2到1.6的比率。我尝试使用这些比率的方法是将每张桌子的大小和位置相乘或相除（均尝试）。一切都绝对定位，但此轨道不起作用。

//makeDesk snippet - positioning function
var d = $("<div />", {
        id: "desk_" + desk.id,
        style:  "background-image:url(./images/Desks/desk" + desk.deskType + ".png);transform:rotate(" + desk.rotation + "deg)"
    }); //var d=div...

//store size and position for adjusting according to zoom capture
    d.data("height",desk.height/ratio.h);
    d.data("width",desk.width/ratio.w);
    d.data("top",desk.y/ratio.h);
    d.data("left",desk.x/ratio.w);

    d.css({'left': d.data("left") + "px", 'top': + d.data("top") + "px",
                'height': d.data("height") + "px", 'width': d.data("width") + "px",
                "font-size": + d.data("width")/2 +"px"});
//end snippet

我正在寻找有关如何更改代码或更改方法以实现此目的的任何建议。

谢谢。

根据用户分辨率jquery调整定位对象的大小和位置

0 个答案: