
var screen = windowscreen;//获取分辨率
screenwidth;//获取分辨率的宽度
screenheight;//获取分辨率的高度
documentgetElementsByTagName('body')[0]stylezoom=067 //该方法将页面设置比例调整为67%
js版和css版自动按比例调整大小方法,分别如下:
<title>javascript大小处理函数</title><script language=Javascript>
var proMaxHeight = 150;
var proMaxWidth = 110;
function proDownImage(ImgD){
var image=new Image();
imagesrc=ImgDsrc;
if(imagewidth>0 && imageheight>0){
var rate = (proMaxWidth/imagewidth < proMaxHeight/imageheight)proMaxWidth/imagewidth:proMaxHeight/imageheight;
if(rate <= 1){
ImgDwidth = imagewidthrate;
ImgDheight =imageheightrate;
}
else {
ImgDwidth = imagewidth;
ImgDheight =imageheight;
}
}
}
</script>
</head>
<body>
<img src="999jpg" border=0 width="150" height="110" onload=proDownImage(this); />
<img src="roomjpg" border=0 width="150" height="110" onload=proDownImage(this); />
</body>
纯css的防止撑破页面的代码,会自动按比例缩小:
<style type="text/css">content-width {MARGIN: auto;WIDTH: 600px;}
content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(thiswidth > 600 "600px" : thiswidth)!important;}
</style>
<div class="content-width">
<p><img src="/down/js/images/12567247980jpg"/></p>
<p><img src="/down/js/images/12567247981jpg"/></p>
</div>
原理:
用JS在加载后判断是否突破规定的高和宽,如果超过再根据的宽高比例进行调整。
特别说明,JS代码只限制的高或者宽时,宽或者高会按照比例进行相应调整。
假如你需要把所有的显示在140226的区间里面,那么就使用下面这样的代码:
<img src=2009/04/1232336585-19jpg onload='if (thiswidth>140 || thisheight>226) if (thiswidth/thisheight>140/226) thiswidth=140; else thisheight=226;'>
以上就是关于js获取分辨率和缩放页面的方法全部的内容,包括:js获取分辨率和缩放页面的方法、如何利用JS或者CSS样式来自动调整图片大小、如何使用JS等比例改变显示图片的大小等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)