js+jQuery按比例缩放图片(网络图片或本站图片均适用)

经常会遇到这样的问题,图片的宽度会比容器的宽度大而导致页面或者图片变形.

解决办法1:图片的宽度和高度写死.

分析:因为每个图片的高度和宽度比是不一样的,如果写死宽度和高度会造成图片按照非正常比例拉伸或压缩,图片会变形,所以排除这个方法

 

 

解决办法2:(亲测,可行)

/*
    获取图片的高度和宽度
本来可以用更简单的方法,
例如:
jq方式. $("#img_id").attr("width");
js方式.document.getElementById("img_id").offsetWidth;
等等更多其它方法
为何要如此麻烦?
原因:当图片不是本地图片,而是网络图片的时候,你就会发现,上面那段小代码就会获取不到宽度和高度,可以试试
    */
    function imgLoadEvent(callback, url) {//圖片事件加載
        var img = new Image();
        img.onreadystatechange = function () {
            if (this.readyState == "complete") {
                callback({ "w": img.width, "h": img.height });
            }
        }

        img.onload = function () {
            if (this.complete == true) {
                callback({ "w": img.width, "h": img.height });
            }
        }

        img.onerror = function () {
            callback({ "w": 0, "h": 0 });
        }

        img.src = url;
    }

    /*
    图片按照比例缩放
    ImgD 图片对象(jQuery对象), 
    iwidth:允许的最小宽度
    iheight:允许的最小高度
    */
    function DrawImage(ImgD, iwidth, iheight) {
        imgLoadEvent(function (obj) {
            //图片按比例缩放 
            var flag = false;
            var new_width = obj["w"];
            var new_height = obj["h"];
            if (new_width > iwidth) {//当图片的宽度大于最大宽度时,才进行缩放
                if (new_width > 0 && new_height > 0) {
                    flag = true;
                    if (new_width / new_height >= iwidth / iheight) {
                        if (new_width > iwidth) {
                            ImgD.attr("width", iwidth);
                            ImgD.attr("height", (new_height * iwidth) / new_width);
                        } else {
                            ImgD.attr("height", new_width);
                            ImgD.attr("width", new_height);
                        }
                    } else {
                        if (new_height > iheight) {
                            ImgD.attr("height", iheight);
                            ImgD.attr("width", (new_width * iheight) / new_height);
                        } else {
                            ImgD.attr("height", new_height);
                            ImgD.attr("width", new_width);
                        }
                    }
                } 
            }
        }, $.trim(ImgD.attr("src")));
    }



 /*调用范例*/ 
 var img = $("div.sj_show_new img");//找到页面上class='sj_show_new'的DIV下面的所有图片

 for (var i = 0; i < img.size(); i++) {//循环缩放
 　　var o = $(img[i]);
 　　DrawImage(o, 600, 500);//指定最大宽度和高度,最大宽度原则上应以图片容器DIV的宽度为上限
 }