获取图片的真实宽度和高度

最新推荐文章于 2022-05-18 16:53:02 发布

weixin_34067102

最新推荐文章于 2022-05-18 16:53:02 发布

阅读量253

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/yjft/blog/1576742

版权

为什么80%的码农都做不了架构师？>>>

    //根据图片原始大小设置其适合尺寸


    var _w = parseInt($(window).width());//获取浏览器的宽度

    $(".my_question img").each(function (i) {

        var img = $(this);
        var realWidth;//真实的宽度
        var realHeight;//真实的高度

        //说明，$("<img/>")这里是创建一个临时的img标签，类似js创建一个new Image()对象！
        $("<img/>").attr("src", $(img).attr("src")).load(function () {
            /*
              如果要获取图片的真实的宽度和高度有三点必须注意
              1、需要创建一个image对象：如这里的$("<img/>")
              2、指定图片的src路径
              3、一定要在图片加载完成后执行如.load()函数里执行
             */
            realWidth = this.width;
            realHeight = this.height;


            if (realHeight <= 100) {

                $(img).css({"width": "auto", "height": "25px"});

            } else if (realHeight <= 150) {

                $(img).css({"width": "auto", "height": "35px"});


            } else if (realHeight <= 220) {


                $(img).css({"width": "auto", "height": "45px"});

            } else if (realHeight <= 300) {


                $(img).css({"width": "auto", "height": "70px"});


            } else {

                $(img).css({"width": "auto", "height": "170px"});


            }


            console.log("原始宽度----：" + realWidth + "原始高度----：" + realHeight);


        });
    });

转载于:https://my.oschina.net/yjft/blog/1576742