点击图片放大至原始图片大小

Posted 2020-08-22

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

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的原因，还请懂的大神多多指点，如何实现上传的图片文件，点击缩略图，放大至原始大小！！！

本文出自 “小叙前端” 博客，请务必保留此出处http://beileixinqing.blog.51cto.com/7540036/1881158