文档章节

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

高处胜寒
 高处胜寒
发布于 2017/11/21 15:46
字数 226
阅读 17
收藏 0
    //根据图片原始大小设置其适合尺寸


    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);


        });
    });

 

© 著作权归作者所有

高处胜寒

高处胜寒

粉丝 9
博文 213
码字总数 148499
作品 0
西安
程序员
私信 提问
android 图片中的三种宽高的理解

1)显示宽度:ImageView中的图片(Bitmap、Drawable)在ImageView中显示的高度,是通过Matrix计算之后的宽度。当放大图片时,这个宽度可能超过ImageView的宽度。 2)真实宽度:ImageView中的图片...

天王盖地虎626
2015/09/05
383
0
多列列表控件中图片尺寸处理的若干问题

一、自适应 当前终端设备种类繁多,即单以 iOS 设备论计,从 iPhone 3GS 到 iPhone 6 Plus 总的数量亦不少了。如果对图片的什么尺寸都不指定(默认),或者只确定一种尺寸(也就是写死了),...

sp42
2014/11/05
0
0
js瀑布流效果搭建

最终实例下载地址:http://www.oschina.net/code/snippet235264455042 一.基本瀑布流实现 这篇博客也是实例的讲解,本来已经完成了一半,因为临时有事出去,再回来一个没注意,关闭了页面,我...

透笔度
2016/03/29
306
0
app端服务API 第二版

基础url为: http://120.24.163.199/ok2_app/ 用户登录 /user/login?user.accountName=xxx&user.accountPwd=xxx&device.deviceId=手机设备号&device.mobileOS=ANDROID 或者 IOS 其中 device......

罗继猛
2015/02/03
5
1
UIView上加载多个尺寸不同的网络图片的布局

项目中页面需要用到一个展示多个网络图片的页面,图片高低不等.异步加载完成时间不同,不能将高度固定,该文章用于简单布局. 1.创建用于存放imgView的view _headerImgView = [[UIView alloc]in...

炽梨
2016/03/17
46
0

没有更多内容

加载失败,请刷新页面

加载更多

为什么要在网站中应用CDN加速?

1. 网页加载速度更快 在网站中使用CDN技术最直接的一个好处就是它可以加快网页的加载速度。首先,CDN加速的内容分发是基于服务器缓存的,由于CDN中缓存了不少数据,它能够给用户提供更快的页...

云漫网络Ruan
27分钟前
4
0
亚玛芬体育(Amer Sports)和信必优正式启动合作开发Movesense创新

亚玛芬体育和信必优正式启动合作开发Movesense创新,作为亚玛芬体育的完美技术搭档,信必优利用Movesense传感器技术为第三方开发移动应用和服务。 Movesense基于传感器技术和开放的API,测量...

symbiochina88
38分钟前
2
0
创龙TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA核心板规格书

SOM-TL437xF是一款广州创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA芯片设计的核心板,采用沉金无铅工艺的10层板设计,适用于高速数据采集和处理系统、汽车导航、工业自动化等领...

Tronlong创龙
39分钟前
3
0
好程序员Java学习路线分享MyBatis之线程优化

  好程序员Java学习路线分享MyBatis之线程优化,我们的项目存在大量用户同时访问的情况,那么就会出现大量线程并发访问数据库,这样会带来线程同步问题,本章我们将讨论MyBatis的线程同步问...

好程序员官方
45分钟前
6
0
IDEA 自定义方法注解模板

IDEA 自定义方法注解模板 1、使用效果 /*** 计算交易费用* @Author wangjiafang* @Date 2019/9/11* @param feeComputeVo* @return*/@PostMapping("/v1/fee_compute")public ApiResp......

小白的成长
45分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部