低一度

顶部横幅

JS实现图片自动按比例缩小代码

2010-7-4 - diyidu - 网页设计 - Views

最近不少使用Z-Blog的同学向我反映了这个问题——如果在博客中插入尺寸过大的图片，会导致页面被图片撑破，出现页面错位或错乱现象。他们问说是否有办法能够实现图片自动按比例缩小？低一度想了想，办法是有的，利用一小段JS代码就能达成。
首先，假设你的博客主题调用日志内容与摘要时的DIV格式如下——

<div id="content"><#article/intro#></div>（摘要）

<div id="content"><#article/content#></div>（全文内容）

当你在摘要或文章中插入图片的时候，忽略其他非图片因素，整体代码格局就会变为这样——

<div id="content"><img alt="" width="宽" height="高" src="图片路径" /></div>（此时的宽与高是实际尺寸，比如width="1024" height="768"）

那么，如何让该图片自动按比例缩小呢？根据这个DIV，我们可以在该页面所调用的模板中插入如下代码——

<script type="text/javascript" >
//缩放图片到合适大小

function ResizeImages()
{
   var myimg,oldwidth,oldheight;
   var maxwidth=400;  //图片缩放后的宽度，可自行修改
   var maxheight=300;  //图片缩放后的高度，可自行修改
   var imgs = document.getElementById('content').getElementsByTagName('img');  //如果你定义的id不是content，请修改此处

   for(i=0;i<imgs.length;i++){
     myimg = imgs[i];

     if(myimg.width > myimg.height)
     {
         if(myimg.width > maxwidth)
         {
            oldwidth = myimg.width;
            myimg.height = myimg.height * (maxwidth/oldwidth);
            myimg.width = maxwidth;
         }
     }else{
         if(myimg.height > maxheight)
         {
            oldheight = myimg.height;
            myimg.width = myimg.width * (maxheight/oldheight);
            myimg.height = maxheight;
         }
     }
   }
}
//缩放图片到自定义大小
ResizeImages();
</script>

这样一来，原先这张1024*768的图片，即可按比例被缩小为400*300了。不过，这个方法有一点不足，即并非等比例缩小。举个例子，当原图的宽高比例为900*360这样子时，缩小后，同样变成了400*300的比例，如此就可能导致图片变形。不知道大家是否有更好的解决办法？OK，最后再来一个实例演示——


提示：您可以先修改部分代码再运行

关键词 // JS实例 JS应用 网页设计
出处：低一度，链接：http://www.diyidu.cn/post/js_tupiansx.html

上一篇：与老朋友Q聊人生，感慨万千 下一篇：新手选购虚拟主机N个注意事项

随机推荐

to "JS实现图片自动按比例缩小代码"

  • acboy
    #1 acboy 回复该留言 2010-7-4 12:23:41
    沙发，我的沙发。
    周哥 于 2010-7-4 12:24:39 回复
    不厚道！
    acboy 于 2010-7-4 12:25:08 回复
    要是用windows live writer 写日志就不会有这问题啦，因为在那里可以随便拖拽，随意缩放……
    周哥 于 2010-7-4 12:26:48 回复
    好像不对呢，一看就变成周哥不厚道了，难道真的是周哥不厚道？桶哥怎么用这么另类的表情哇？
  • 周哥
    #2 周哥 回复该留言 2010-7-4 12:24:04
    加载的话还是加载大的，有意义？
    diyidu 于 2010-7-4 12:25:12 回复
    最大的意义就是防止页面被撑破。
  • LouisHan
    #4 LouisHan 回复该留言 2010-7-4 13:04:34
    还是直接用小图片吧。
    diyidu 于 2010-7-5 10:33:28 回复
    是啊，这样最直接。
  • haibor
    #6 haibor 回复该留言 2010-7-4 14:05:13
    其实吧，博客而已，直接用小图算了。
    diyidu 于 2010-7-5 10:34:30 回复
    这样倒是最直接，呵。
  • 石头
    #7 石头 回复该留言 2010-7-4 14:32:46
    我一般都会把图片处理好。
    diyidu 于 2010-7-5 10:35:03 回复
    但是不少同学不懂这个。
  • BoKeam
    #8 BoKeam 回复该留言 2010-7-4 19:02:03
    看来又是一个技术博客，不错，我会常来的。
    diyidu 于 2010-7-5 10:35:30 回复
    欢迎常来。
  • 网名
    #9 网名 回复该留言 2010-7-4 19:07:30
    学习啦，代码我偷走了，哈。
    diyidu 于 2010-7-5 10:35:53 回复
    哦了。呵呵。
  • 踏雪残情
    #10 踏雪残情 回复该留言 2010-7-4 20:08:57
    在图片标签里加个属性：onload="if(this.offsetWidth&gt;300)this.width=300;"
    或用CSS的方式：
    #content img { /*博客内容下的img标签*/
    max-width: 300px; /* FF*/
    width:expression(this.width > 300 ? 300 : true);
    }
    diyidu 于 2010-7-5 10:36:38 回复
    恩，CSS的方法，值得借鉴。
  • 踏雪残情
    #11 踏雪残情 回复该留言 2010-7-4 20:15:36
    或者你的代码不要限制高——
    function ResizeImages()
    {
    var myimg;
    var maxwidth=300; //图片缩放后的宽度，可自行修改
    var imgs = document.getElementById('content').getElementsByTagName('img'); //如果你定义的id不是content，请修改此处

    for(i=0;i<imgs.length;i++){
    myimg = imgs[i];
    if(myimg.width > maxwidth)
    {
    myimg.width = maxwidth;
    }
    }
    }
    diyidu 于 2010-7-5 10:39:00 回复
    好像行不通哦。
  • 飞猪
    #12 飞猪 回复该留言 2010-7-4 20:24:30
    我都是手动修改的。
    diyidu 于 2010-7-5 10:39:37 回复
    手动？是在后台直接压缩？
  • ifenwen
    #13 ifenwen 回复该留言 2010-7-4 21:49:25
    很不错哦，效果不错。
    diyidu 于 2010-7-5 10:40:07 回复
    呵呵，谢谢鼓励。
  • 刘晓林
    #14 刘晓林 回复该留言 2010-7-4 22:39:04
    我不用，直接写点生活就好！
    diyidu 于 2010-7-5 10:40:35 回复
    这样最好啊。
  • 猪八戒
    #15 猪八戒 回复该留言 2010-7-4 23:21:21
    这个运行代码的窗口不错。
    diyidu 于 2010-7-5 10:41:06 回复
    呵呵，这是个插件。
  • beyond
    #16 beyond 回复该留言 2010-7-5 3:18:15
    这个比较实用，收下了，谢谢……
    diyidu 于 2010-7-5 10:41:34 回复
    不客气。
  • 竹下无为梦
    #17 竹下无为梦 回复该留言 2010-7-5 8:26:32
    我是WP，飘过。
    diyidu 于 2010-7-5 10:42:28 回复
    WP也可以弄的，方法一样。不过WP好像已经有缩略图插件了。
  • 太阳博客
    #18 太阳博客 回复该留言 2010-7-5 8:39:04
    绿色皮肤，真养眼。
    diyidu 于 2010-7-5 10:43:06 回复
    呵，姐姐那个主题也很养眼啊。
  • 草儿
    #20 草儿 回复该留言 2010-7-5 14:04:37
    顶一个，博主技术牛。
    diyidu 于 2010-7-5 15:48:21 回复
    多谢顶呵。
  • 老实人博客
    #21 老实人博客 回复该留言 2010-7-5 14:33:38
    这样做了，影响速度吗？哈哈，我好像只关心速度了~
    diyidu 于 2010-7-5 15:49:09 回复
    负责任地说，肯定会影响到。
  • 快鱼
    #22 快鱼 回复该留言 2010-7-6 9:34:23
    用CSS来实现对速度好点吧。
    diyidu 于 2010-7-8 18:04:17 回复
    其实都差不多，CSS对SEO会好一点。
  • 海天
    #23 海天 回复该留言 2010-7-8 20:52:11
    要是能等比，就更强悍了~
    diyidu 于 2010-7-9 13:24:56 回复
    应该可以吧，我再想想怎么实现。
  • 易搜博客
    #24 易搜博客 回复该留言 2010-7-10 16:23:27
    很好，来帮你顶了，菜鸟过来看看。感谢你的回访哦！
    diyidu 于 2010-7-10 17:01:38 回复
    欢迎呵。常来。
  • 流年
    #25 流年 回复该留言 2010-8-8 11:09:00
    用css定义个max-width，然后js处理，超过此则宽度缩放为此；然后计算一下缩放率，高度就乘以这个缩放率不就可以了吗？高度就不要处理了，就页面来说，撑破的只会是横向，纵向没关系。这样900*360就被缩放为400*160，依然维持宽高比。
    diyidu 于 2010-8-8 11:18:39 回复
    没错。我的新主题就是用这个方法实现的。

Add comment

验证码