JS锁定页面的大小

1、HTML结构代码如下：

<div id="box">        
   <img src="~/backcjian/images/login/bg.png" />
</div>

2、css样式代码如下：

body {
    margin: 0px;padding: 0px;
    background: #2b5b36;position:absolute;
    top:0px;bottom:0px;left:0px;right:0px;
    overflow:hidden;
}
#box {
    position: fixed;
    top: 20%;left: 26%;
    opacity:0.9;/*图片的透明度*/
    height:200px;width:400px;border-radius: 10px;
}

3、js代码实现浏览器涨缩时div大小不改变，代码如下：

function bodyScale() {
    var i = screen.width;//获取电脑屏幕的宽度
    var width = window.innerWidth;//获取浏览器当前的宽度
    var scales = width / i;//浏览器的宽度除以电脑屏幕的宽度
    var box = document.getElementById("box");//获取div的id元素
    box.style.zoom = scales;//zoom缩放  //浏览器涨缩时，div的宽高等于scales值      
}
//改变浏览器大小时调用此方法bodyScale()
//onresize 事件会在窗口或框架被调整大小时发生。
//onresize 事件通过监听对象的高和宽，其中任何一个属性发生变化都会触发 onresize 事件。
//除了 window 对象，其他 html 标签好像并不支持 onresize 事件，定义了之后并不会触发。
window.onload = window.onresize = function () {
    bodyScale();            
}

4、效果图