jquery获取图片真实宽高并且实现浏览器居中效果

柔光的暖阳◎ 2022-05-08 12:38 224阅读 0赞

## JQuery获取图片真实宽高 ##

页面有一个图片点击获取图片真实宽高

<img  src="img/a1.jpg" class="all studio"  onclick="clickPhoto(this)"

点击事件

function clickPhoto(obj) {
      var img = new Image();
                img.src =$(obj).attr("src") ;
                var realWidth=img.width;
                var realHeight=img.height;
    
                console.log(realWidth);
                console.log(realHeight);
    }

图片在浏览器中居中

<div id="innerdiv" style="position:absolute;">
            <img id="bigimg" style="border:5px solid #fff;" src="" />
        </div>

jQuery代码

var windowW = $(window).width();//获取当前窗口可视区域宽度
                var windowH = $(window).height();//获取当前窗口视区域高度
    
                //alert(windowW);
                //alert(windowH);
    
                var img = new Image();
                img.src =$(obj).attr("src") ;
                var realWidth=img.width*2;
                var realHeight=img.height*2;
    
                        var imgWidth, imgHeight;
                        var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放
                        if(realHeight>windowH*scale) {//判断图片高度
                            imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
                            console.log(imgHeight);
                            imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
                            console.log(i)
                            if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
                                imgWidth = windowW*scale;//再对宽度进行缩放
                            }
                        } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
                            imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
                            imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
                        } else {//如果图片真实高度和宽度都符合要求，高宽不变
                            imgWidth = realWidth;
                            imgHeight = realHeight;
                        }
                        $("#bigimg").css("width",imgWidth);//以最终的宽度对图片缩放
                        $("#bigimg").css("height",imgHeight);
                        var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
                        var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
    
                         $("#innerdiv").css({"top":h, "left":w});//设置#innerdiv的top和left属性

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

相关通过jquery获取图片真实宽高

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

末蓝、/ 2022年11月29日 11:51/ 0 赞/ 174 阅读

相关 Javascript 获取图片的真实宽高和文件大小

获取图片的真实尺寸 getImageSize(imgSrc) { return new Promise((resolve, reject) =>

「爱情、让人受尽委屈。」/ 2022年11月14日 10:24/ 0 赞/ 223 阅读

相关 js获取图片宽高

原文链接：http://www.qttc.net/201304304.html 快速获取图片的宽高其实是为了预先做好排版样式布局做准备，通过快速获取图片宽高的方法比onloa

港控/mmm°/ 2022年08月18日 02:59/ 0 赞/ 267 阅读

相关获取-图片实际宽高

Get on screen image var screenImage = $("image"); // Create new offscre

绝地灬酷狼/ 2022年06月11日 04:55/ 0 赞/ 259 阅读

相关 JavaScript & jQuery 获取屏幕高/宽

收集各种网络上信息，整理了一个备份 JavaScript：网页可见区域宽： document.body.clientWidth 网页可见区域高： docume

谁借莪１个温暖的怀抱￠/ 2022年06月05日 01:51/ 0 赞/ 216 阅读

相关 jquery获取图片真实宽高并且实现浏览器居中效果

JQuery获取图片真实宽高页面有一个图片点击获取图片真实宽高 <img src="img/a1.jpg" class="all studio" oncl

柔光的暖阳◎/ 2022年05月08日 12:38/ 0 赞/ 225 阅读

相关小程序实现图片垂直居中，水平居中并且自适应宽高

效果如下图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

红太狼/ 2022年03月18日 14:37/ 0 赞/ 402 阅读

相关未知图片宽高水平垂直居中

![这里写图片描述][20160328213110837] <!DOCTYPE html> <html> <head>

我就是我/ 2022年01月26日 12:05/ 0 赞/ 249 阅读

相关 jquery获取图片真实宽高

<img id="image" src="../img/1.jpg" /> $(function() { var imgSrc = $("image

太过爱你忘了你带给我的痛/ 2021年12月05日 02:05/ 0 赞/ 296 阅读

相关浏览器获取宽高

`screen.availHeight` is the height the browser's window can have if it is maximized.

待我称王封你为后i/ 2021年09月10日 09:44/ 0 赞/ 444 阅读