点击图片放大至原始图片大小-创新互联
有些时候为了排版的整洁，页面展示的图片不得不都是限定宽高的，如果想要点击图片放大至原始大小进行预览，再次点击回到原来样子，就要用到下面的代码了：
创新互联建站是专业的勐海网站建设公司，勐海接单;提供
做网站、成都网站设计,网页设计,网站设计,建网站,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://scyanting.com/article/cdpeie.html
