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、效果图