博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
控制IMG图片的大小缩放
阅读量:6595 次
发布时间:2019-06-24

本文共 2922 字,大约阅读时间需要 9 分钟。

法一:
img 标签是没有 onload 事件的.所以 UBB 代码中的img用到的onload来处理大的图片进行自适应,这样的办法就不能采取了.
但是经过测试,body还是可以带onload事件的, 所以我解决的办法就是在页面全部加载完后再处理太大的图片.
于是用JS写了一段简单的代码

相关代码
function ReImgSize(){


for (j=0;j<document.images.length;j++)
{

document.images[j].width=(document.images[j].width>420)?"420":document.images[j].width;
}
}

然后 在 body 上加上 οnlοad="ReImgSize()" 就可以了.
经过测试,在Mozilla和IE上通过.
在这里补充一下关于 图片的自适应,这点Mozilla做的比IE好,因为可以用CSS来控制图片的自适应.
我们都知道 Mozilla 支持一个 max-width 的CSS语法.于是,我们这样这样定义图片的全局样式

相关代码 
img{


max-width:100%;height:auto;
}

这样图片就回在div或table内自动适应其大小了.

这也是一种很简单有效的方法:利用CSS+JS让图片自动缩放-图片不变形

.thumbImage {max-width: 100px;max-height: 100px;} /* for Firefox & IE7 */

* html .thumbImage { /* for IE6 */
width: expression(this.width > 100 && this.width > this.height ? 100 : auto);
height: expression(this.height > 100 ? 100 : auto);

法二:

以前是判断heigth和width,然后再决定谁除谁再乘谁。怎么没有想到可以这样:?heigth和width只保留一个属性即可。

function resizeImg(img) {


try {

   if (img.offsetWidth > 0) {

    if (img.offsetWidth > img.height) {

     img.width = img.height;
     img.removeAttribute('height');

    }
   }
   else {


    setTimeout(function() {resizeImg(img);}, 50);
   }
}
catch (ex) {

   ;
}
}

<img οnlοad='resizeImg(this);' height='220' src='upload/200812052052440545.gif'>

简洁代码是一种简洁但不简单的思想,是一种美。

方法三:(可以控制图片高、宽在超出规定范围的时候才缩放)

function resizeImgX(img,iwidth,iheight)
{


   var _img = new Image();
   _img.src = img.src;
   if(_img.width > _img.height)
   {

      img.width = (_img.width > iwidth) ? iwidth : _img.width;
      img.height = (_img.height / _img.width) * img.width;
   }
   else if(_img.width < _img.height)
   {

      img.height = (_img.height > iheight) ? iheight : _img.height;
      img.width = (_img.width / _img.height) * img.height ;
   }
   else
   {

      img.height = (_img.height > iheight) ? iheight : _img.height;
      img.width = (_img.width > iwidth) ? iwidth : _img.width;
   }
}

调用:
<img οnlοad='resizeImg(this,500,400);' src='upload/200812052052440545.gif'>

方法四:
<script language="JavaScript"> 
<!-- 
function ResizeImages()
{


var myimg,oldwidth; 
var maxwidth=180; //缩放系数 
for(i=0;i <document.images.length;i++){

myimg = document.images[i]; 
if(myimg.width > maxwidth)

oldwidth = myimg.width; 
myimg.width = maxwidth; 
myimg.height = myimg.height * (maxwidth/oldwidth); 


}
//--> 
</script>

<script language="JavaScript">
<!--
//图片按比例缩放
var flag=false;
function DrawImage(ImgD,iwidth,iheight){


//参数(图片,允许的宽度,允许的高度)
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){

flag=true;
if(image.width/image.height>= iwidth/iheight){

if(image.width>iwidth){ 
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{

ImgD.width=image.width; 
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{

if(image.height>iheight){ 
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height; 
}else{

ImgD.width=image.width; 
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}

//-->
</script>

调用:<img src="images/toplogo.gif" οnlοad="javascript:DrawImage(this,100,100)">

转载地址:http://tdpio.baihongyu.com/

你可能感兴趣的文章
minix中atoi、atol、atof的实现
查看>>
高效 Java Web 开发框架 JessMA v3.3.1 正式发布
查看>>
[转]C# WinForm动态调用远程Web服务
查看>>
跨数据库服务器查询和跨表更新
查看>>
盘点2013年那些最优秀的网页设计作品【系列五】
查看>>
C#语音朗读文本 — TTS的实现
查看>>
MongoDB中的高级查询(二)
查看>>
再寄小读者之数学篇[2014.07.01-2014.12.31]
查看>>
LA 4080 (多源最短路径+边修改+最短路径树)
查看>>
轻量级工具提示jQuery插件 - Tooltipster
查看>>
lxc命令简单速查
查看>>
[译] 构建未来的设计生态系统
查看>>
谈谈Java中的代理模式
查看>>
JNI开发流程与引用数据类型的处理
查看>>
Netty NioEventLoop 创建过程源码分析
查看>>
iOS 架构模式<demo解析>
查看>>
技术经理值得关注的5件事情
查看>>
这些 Web 开发工具,你都知道吗?
查看>>
Python正则表达式初识(十)附正则表达式总结
查看>>
由event target引发的关于事件流的一连串思考(一)
查看>>