[jQuery] 按比例缩小图片

其实网上有很多教程的,不过他们基本只是提供如下代码:

        /*
         *
         
*/
        $('.public-left img').each(function(){
            var x = 100; //填入目标图片宽度
            var y = 100; //填入目标图片高度
            var w=$(this).width();
            var h=$(this).height();//获取图片宽度、高度
            if (w > x) { //图片宽度大于目标宽度时
                var w_original=w, h_original=h;
                h = h * (x / w); //根据目标宽度按比例算出高度
                w = x; //宽度等于预定宽度
                if (h < y) { //如果按比例缩小后的高度小于预定高度时
                    w = w_original * (y / h_original); //按目标高度重新计算宽度
                    h = y; //高度等于预定高度
                }
            }
            $(this).attr({width:w,height:h});
        });

直接这样使用的话,我们拿到的 $(this).width()和 $(this).height()得到的值都会是0!因为图片没有加载完,js就已经去读取了,所以肯定得到的值都是0。

正确的做法是,要用 $(window).load(),等页面加载完了再执行上面代码,完整代码如下:

        $(window).load(function(){
        /*
         *
         
*/
        $('.public-left img').each(function(){
            var x = 100; //填入目标图片宽度
            var y = 100; //填入目标图片高度
            var w=$(this).width();
            var h=$(this).height();//获取图片宽度、高度
            if (w > x) { //图片宽度大于目标宽度时
                var w_original=w, h_original=h;
                h = h * (x / w); //根据目标宽度按比例算出高度
                w = x; //宽度等于预定宽度
                if (h < y) { //如果按比例缩小后的高度小于预定高度时
                    w = w_original * (y / h_original); //按目标高度重新计算宽度
                    h = y; //高度等于预定高度
                }
            }
            $(this).attr({width:w,height:h});
        });
    });

 

 

 

posted @ 2012-11-20 12:43 DavidHHuan 阅读(...) 评论(...) 编辑 收藏