使图片自适应屏幕大小的js

JavaScript012

使图片自适应屏幕大小的js,第1张

对小屏幕的人来说,经常有人发的图片超过你的屏幕大小,页面下面会出现一个横向滚动条,浏览起来很不方便,有的网站因为排版问题,导致一行文字过长,拉伸了整个页面,都可以通过这个脚本来“修正”,让该页面更适合你的屏幕大小。

gBrowser.loadURI("javascript:(function(){function%20t(f){a=d.createNodeIterator(d,1,f,false)while(a.nextNode()){}}var%20d=documentt(function(e){x=e.offsetLeftl=e.offsetParentwhile(l!=null){x+=l.offsetLeftl=l.offsetParent}var%20w=d.documentElement.clientWidth-xvar%20s=e.styleif(s.marginLeft)w-=s.marginLeftif(s.marginRight)w-=s.marginRightif(s.paddingLeft)w-=s.paddingLeftif(s.paddingRight)w-=s.paddingRightif(s.borderSize)w-=s.borderSizew-=d.defaultView.innerWidth-d.documentElement.offsetWidthif(e.tagName=='IMG'){h=e.clientHeight*w/e.clientWidths.maxHeight=h}s.maxWidth=w+'px'})})()")

js版和css版自动按比例调整图片大小方法,分别如下:

<title>javascript图片大小处理函数</title>

<script language=Javascript>

var proMaxHeight = 150

var proMaxWidth = 110

function proDownImage(ImgD){

      var image=new Image()

      image.src=ImgD.src

      if(image.width>0 && image.height>0){

      var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height

    if(rate <= 1){   

     ImgD.width = image.width*rate

     ImgD.height =image.height*rate

    }

    else {

                          ImgD.width = image.width

                          ImgD.height =image.height

                  }

      }

}

</script>

</head>

<body>

<img src="999.jpg" border=0 width="150" height="110"  onload=proDownImage(this)   />

<img src="room.jpg" border=0 width="150" height="110" onload=proDownImage(this)   />

</body>

纯css的防止图片撑破页面的代码,图片会自动按比例缩小:

<style type="text/css">

.content-width {MARGIN: autoWIDTH: 600px}

.content-width img{MAX-WIDTH: 100%!importantHEIGHT: auto!importantwidth:expression(this.width > 600 ? "600px" : this.width)!important}

</style>

<div class="content-width">

  <p><img src="/down/js/images/12567247980.jpg"/></p>

  <p><img src="/down/js/images/12567247981.jpg"/></p>

</div>

用js控制图片额大小。主要是修改图片的宽度和高度。下面是简单的代码实现:

HTML 代码:

<img src='../1.jgp' id='img' />

这个时候img的图片自身是多大,就会显示多大。100px*100px的图。

js代码:

var oImg = document.getElementById('img')

oImg.width = '50px' //当给img标签的宽度设置为50px后,高度会自动按比例缩小。

oImg.width = '200px' //当给img标签的宽度设置为200px后,高度会自动按比例扩大。