点击图片放大至原始图片大小-创新互联

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

创新互联建站是专业的勐海网站建设公司，勐海接单;提供做网站、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行勐海网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!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的原因，还请懂的大神多多指点，如何实现上传的图片文件，点击缩略图，放大至原始大小！！！

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章名称：点击图片放大至原始图片大小-创新互联
URL地址：http://cqcxhl.cn/article/cdpeie.html