Home > Internet > 动态调整图片尺寸
2009November . 22nd

动态调整图片尺寸

在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。
我前段时间写的一篇文章就遇到过这种事情,后来用CSS的overflow和max-width属性暂时解决了页面变形的问题。这种方法好处是简单,但坏处是会破坏某些细节的效果。
如overflow:hidden,意思是当内部元素宽度大于父框架时隐藏超出宽度的部分。这样做可能会是一些内容突然截断,被隐藏了,很对不起观众。
通过max-width属性限制文章插图最大宽度的话,需要考虑各浏览器的兼容性。IE6是不支持这个属性的,在我印象中,一些浏览器虽然支持这个属性,但图片不是等比缩放的(好像是Safari和Opera,记不清了),这样做的话对这些浏览器的用户很不公平。
因此,我最终选择的是通过JavaScript动态改变图片尺寸。这种方法对各种浏览器兼容性良好(现在应该很少人会禁用JavaScript吧?),如果换主题的话,也可以灵活地改变文章插图的最大尺寸。
方案有两个,由于我使用的主题是加载了jQuery库的,因此可以用以下代码实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(document).ready(function() {
    $('.post img').each(function() {
    var maxWidth = 100; // 图片最大宽度
    var maxHeight = 100;    // 图片最大高度
    var ratio = 0;  // 缩放比例
    var width = $(this).width();    // 图片实际宽度
    var height = $(this).height();  // 图片实际高度
 
    // 检查图片是否超宽
    if(width > maxWidth){
        ratio = maxWidth / width;   // 计算缩放比例
        $(this).css("width", maxWidth); // 设定实际显示宽度
        height = height * ratio;    // 计算等比例缩放后的高度 
        $(this).css("height", height * ratio);  // 设定等比例缩放后的高度
    }
 
    // 检查图片是否超高
    if(height > maxHeight){
        ratio = maxHeight / height; // 计算缩放比例
        $(this).css("height", maxHeight);   // 设定实际显示高度
        width = width * ratio;    // 计算等比例缩放后的高度
        $(this).css("width", width * ratio);    // 设定等比例缩放后的高度
    }
});
});

如果不想加载jQuery库,可以用以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function ResizeImage(image, 插图最大宽度, 插图最大高度)
{
    if (image.className == "Thumbnail")
    {
        w = image.width;
        h = image.height;
 
        if( w == 0 || h == 0 )
        {
            image.width = maxwidth;
            image.height = maxheight;
        }
        else if (w > h)
        {
            if (w > maxwidth) image.width = maxwidth;
        }
        else
        {
            if (h > maxheight) image.height = maxheight;
        }
 
        image.className = "ScaledThumbnail";
    }
}

采用纯JavaScript的话,麻烦点,需要手动为图片加上class=”Thumbnail”,但最终效果是一样的。

  1. 2009November . 22nd - 7:21 PM

    沙发?
    哈。用这个用户体验好。图片超出范围很烦的。

  2. 2009November . 22nd - 7:55 PM

    图片超高还好,超宽就要把侧边栏挤下去了。。。是可恨

  3. 2009November . 22nd - 8:04 PM

    hao dong xi 啊。

  4. 2009November . 22nd - 10:18 PM

    我一般是在本地调整大小并压缩

  5. 2009November . 22nd - 10:21 PM

    汗,我就是把图片缩小了再插入的,的确太麻烦了,这方法好啊,节省了很多精力了

  6. 2009November . 22nd - 11:55 PM

    这个我看不懂,要是有演示说明下就更好了。

  7. 2009November . 23rd - 12:07 AM

    @三七八蛋
    本地调好尺寸后在上传,这样用户体验才是最好的。这个方法只不过是方便
    @万戈
    对对,超高倒是没什么的
    @浮虾
    嗯,对付多图的文章能省很多精力
    @LAONB
    其实只要挂上代码就OK了,我博客里隐藏了一个演示
    @A.shun
    这样多辛苦啊

  8. 2009November . 23rd - 12:09 AM

    @bolo
    是有点辛苦。。不过主要是压缩大小嘛
    我图片一般放自己空间,流量影响很大

  9. 2009November . 23rd - 2:03 AM

    哇 这个有用!~

  10. 2009November . 23rd - 8:59 AM

    还好 我的主题,图片再宽也不挤。以前的主题遇到过这个问题呢

  11. 2009November . 23rd - 1:06 PM

    我们没用啊,zblog的用户

  12. 2009November . 23rd - 1:08 PM

    @90后的贼
    JavaScript是通用的

  13. 2009November . 23rd - 1:35 PM

    我都是先把图片修改好在放空间里,呵呵

  14. 2009November . 23rd - 6:28 PM

    我都是用小图,一般不会超出范围

  15. 2009November . 23rd - 6:28 PM

    很人情化的东东。。

  16. 2009November . 23rd - 7:41 PM

    我图片用的少了,文字多了。你这玩意貌似很实用的说哦

  17. 2009November . 23rd - 10:57 PM

    很好的,收藏了

  18. 2009November . 24th - 10:45 AM

    来你这里学习一下

  19. 2009November . 24th - 1:51 PM

    爱折腾的家伙,居然又换了个引导页……

  20. 2009November . 24th - 2:31 PM

    @一天一歌
    生命不止,折腾不息

  21. 2009November . 25th - 1:28 PM

    我也用不上了,我的BO。

  22. 2009November . 25th - 9:33 PM

    @古墓候梅
    都说了,JavaScript是适用于任何网站的

  23. 2009November . 26th - 11:24 AM

    好东西呦,先收藏了~~

  24. 2009November . 26th - 12:33 PM

    好东西,收藏先

  25. 2009November . 28th - 11:58 AM

    先收藏一下

  26. 2010July . 18th - 1:25 PM

    学习了。

  27. 2010October . 18th - 12:35 PM

    好东西,收藏先

  28. 2010October . 27th - 8:20 PM

    试了一下,没整出来

Subscriber selector

Close