Zoom to background

by PhilQ

HTML

<div id="background"><img src="http://www.olaleslie.com/wp-content/uploads/2013/02/Conveyancing-Solicitors-London-Rural-Land-Essex-Surrey-Kent-Cornwall-Derbyshire-Yorkshire-Suffollk1.jpg" width="400" height="400"id="backgroundimg" /></div>
<div id="stat"> </div><br /><br />
<br />
<button onclick="setImgBackground(0,1920,0,1200);">100%</button><br />
<button onclick="setImgBackground(0,960,0,600);">LB</button>
<button onclick="setImgBackground(961,1920,0,600);">RB</button><br />
<button onclick="setImgBackground(0,960,601,1200);">LO</button>
<button onclick="setImgBackground(961,1920,601,1200);">RO</button><br />
jlags kjlgf kjash cvkjahkj ajh akvh kaf adg sdfg ds<br />
auygf lakjgsdfkjlags kjlgf kjash cvkjahkj ajh akvh kaf adg sdfg ds<br />
auygf lakjgsdfkjlags kjlgf kjash cvkjahkj ajh akvh kaf adg sdfg ds<br />
auygf lakjgsdfkjlags kjlgf kjash cvkjahkj ajh akvh kaf adg sdfg ds<br />
auygf lakjgsdfkjlags kjlgf kjash cvkjahkj ajh akvh kaf adg sdfg ds<br />
auygf lakjgsdfkjlags kjlgf kjash cvkjahkj ajh akvh kaf adg sdfg ds<br />
auygf lakjgsdfkjlags kjlgf kjash cvkjahkj ajh akvh kaf adg sdfg ds<br />
auygf lakjgsdfkjlags kjlgf kjash cvkjahkj ajh akvh kaf adg sdfg ds<br />
auygf lakjgsdfkjlags kjlgf kjash cvkjahkj ajh akvh kaf adg sdfg ds<br />
auygf lakjgsdfkjlags kjlgf kjash cvkjahkj ajh akvh kaf adg sdfg ds<br />
auygf lakjgsdfkjlags kjlgf kjash cvkjahkj ajh akvh kaf adg sdfg ds<br />
auygf lakjgsdfkjlags kjlgf kjash cvkjahkj ajh akvh kaf adg sdfg ds<br />
auygf lakjgsdfkjlags kjlgf kjash cvkjahkj ajh akvh kaf adg sdfg ds<br />
auygf lakjgsdfkjlags kjlgf kjash cvkjahkj ajh akvh kaf adg sdfg ds<br />
auygf lakjgsdfkjlags kjlgf kjash cvkjahkj ajh akvh kaf adg sdfg ds<br />
auygf lakjgsdfkjlags kjlgf kjash cvkjahkj ajh akvh kaf adg sdfg ds<br />
auygf lakjgsdfkjlags kjlgf kjash cvkjahkj ajh akvh kaf adg sdfg ds<br />
auygf lakjgsdfkjlags kjlgf kjash cvkjahkj ajh akvh kaf adg sdfg ds<br />
auygf lakjgsdfkjlags kjlgf kjash cvkjahkj ajh akvh kaf adg sdfg ds<br...

CSS

html, body {
    padding: 0px;
    margin: 0px;
}
body {
    color: #ffffff;
    font-size: 20px;
}
#stat {
    display: inline;
}
#background {
    z-index: -2;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(80,0,200,0.3);
}
#backgroundimg {
    z-index: -1;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
}

JavaScript

var winW = 0;
    var winH = 0;
    var docW = 0;
    var docH = 0;
 
    var bgW = 800; /* 1000 */
    var bgH = 500; /* 800 */
    var oImgW = 1920;
    var oImgH = 1200;

    var cImgX1 = 0;
    var cImgX2 = 1920;
    var cImgY1 = 0;
    var cImgY2 = 1200;
    function setImgBackground(x1,x2,y1,y2) {
        cImgX1 = x1;
        cImgX2 = x2;
        cImgY1 = y1;
        cImgY2 = y2;
        winW = $(window).width();
        winH = $(window).height();
        docW = $(document).width();
        docH = $(document).height();
        $("#stat").text("winW="+winW+"\nwinH="+winH);
        
        var wRatio = (winW/winH);
        var iRatio = ((cImgX2-cImgX1)/(cImgY2-cImgY1));
        if(iRatio>wRatio) {
            var zoom = (winH/(cImgY2-cImgY1));

        } else {
            var zoom = (winW/(cImgX2-cImgX1));
        }
        var iH = ((cImgY2-cImgY1)*zoom);
        var iW = ((cImgX2-cImgX1)*zoom);
        midWX = (winW/2);
        midWY = (winH/2);
        midX = (((cImgX1+cImgX2)/2)*zoom);
        midY = (((cImgY1+cImgY2)/2)*zoom);
        posX = Math.round((0-cImgX1*zoom)+((winW-iW)/2));
        posY = Math.round((0-cImgY1*zoom)+((winH-iH)/2));
        posX = Math.min(posX,0);
        posX = Math.max(posX,(0-(oImgW*zoom)+winW));
        posY = Math.min(posY,0);
        posY = Math.max(posY,(0-(oImgH*zoom)+winH));
        bgW = Math.round(oImgW*zoom);
        bgH = Math.round(oImgH*zoom);
        $("#backgroundimg").animate({
            width: bgW,
            height: bgH,
            left: posX+"px",
            top: posY+"px"
        }, {
            duration: 2000,
            easing: 'easeInOutQuad',
            complete: function() {
                // Animation complete.
            }
        });
    }
    function updateImgBackground() {
        winW = $(window).width();
        winH = $(window).height();
        docW = $(document).width();
        docH = $(document).height();
        $("#stat").text("winW="+winW+"\nwinH="+winH);
        
       ...