js获取分辨率和缩放页面的方法

js获取分辨率和缩放页面的方法,第1张

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等比例改变显示图片的大小等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://www.54852.com/web/9696724.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-01
下一篇2023-05-01

发表评论

登录后才能评论

评论列表(0条)

    保存