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

JavaScript016

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

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<script>标签，输入js代码：$('body').append('<img src="https://www.baidu.com/img/bd_logo1.png" />')。

3、浏览器运行index.html页面，此时图片被js成功显示到页面上。