點擊圖片放大至原始圖片大小

有些時候為了排版的整潔，頁面展示的圖片不得不都是限定寬高的，如果想要點擊圖片放大至原始大小進行預覽，再次點擊回到原來樣子，就要用到下面的代碼了：

var _w = parseInt($(window).width());//獲取瀏覽器的寬度
$("#abc img").each(function(i){
    var img = this;
    var realWidth;//真實的寬度
    var realHeight;//真實的高度
    $("<img/>").attr("src", $(img).attr("src")).load(function() {
        realWidth = this.width;
        realHeight = this.height;

    })
    var flag = 1;
    $(img).on("click",function () {
        if (flag == 1) {
            if(realWidth>=_w){
                $(img).css({
                    "width": "100%",
                    "height": "auto",
                    "position": "fixed",
                    "top": "50%",
                    "left": "50%",
                    "margin-top": "-30%",
                    "margin-left": "-50%"
                });
            }else{
                $(img).css({
                    "width": realWidth,
                    "height": realHeight,
                    "position": "fixed",
                    "top": "50%",
                    "left": "50%",
                    "margin-top": -realHeight / 2,
                    "margin-left": -realWidth / 2
                });
            }
            flag = 0;
        } else {
            $(img).css({
                "width": 500,
                "height": 400,
            });
            flag = 1;
        }
    });
});

以上代碼獲取圖片原始寬高為轉載，進行加工后如上。親測有效，但是對于圖片上傳后，點擊方法后，貌似并不能獲取到原始寬高，我想應該是load的原因，還請懂的大神多多指點，如何實現上傳的圖片文件，點擊縮略圖，放大至原始大?。。?！