有些时候为了排版的整洁,页面展示的图片不得不都是限定宽高的,如果想要点击图片放大至原始大小进行预览,再次点击回到原来样子,就要用到下面的代码了:

var _w = parseInt($(window).width());//获取浏览器的宽度$("#abc img").each(function(i){    var img = this;    var realWidth;//真实的宽度    var realHeight;//真实的高度    $("").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的原因,还请懂的大神多多指点,如何实现上传的图片文件,点击缩略图,放大至原始大小!!!