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

JavaScript021

使图片自适应屏幕大小的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'})})()")

在你的css里加入如下代码：

.img {

width: expression(this.width >130)this.width=120

height: expression(this.height >86)this.height=76

}

//代码中数字为你要显示图片的宽和高

在body的图片标签中调用，如：<IMG class="img" SRC='http://www.home.com/images/upfile/201182191918934.jpg'></a>。你试试看能否解决问题。祝福你，朋友！

这种情况用CSS来控制最合适。例如你想让初始图片显示为100px*100px，则：

<img src="images/pic.png" width="100" height="100" />

或者：

<img src="images/pic.png" style="width:100pxheight:100px" />

当页面中图片非常多，且要求每张图片的大小依据其父容器来固定怎么办？可以使用max-weight：

img {max-weight:100%}

这样图片会自动缩放到和其父容器等宽。