有些时候为了排版的整洁，页面展示的图片不得不都是限定宽高的，如果想要点击图片放大至原始大小进行预览，再次点击回到原来样子，就要用到下面的代码了：
计算
安全
数据库
网络和加速
企业服务
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的原因，还请懂的大神多多指点，如何实现上传的图片文件，点击缩略图，放大至原始大小！！！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
