<body style="TEXT-ALIGN: center;">

<div id="testID" style="background:red;MARGIN-RIGHT: auto; MARGIN-LEFT: auto; width:173;height:184">

        <img src="http://e.hiphotos.baidu.com/image/pic/item/024f78f0f736afc385a0f0e7b119ebc4b6451280.jpg" style="display:none;">

</div>

<body>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script >

    var selector = $("#testID").find("img"); //选择器

    selector.hide();

    var containerWidth = 173 * 1; //173：容器宽度 1：宽度填充百分之百

    var containerHeight = 184 * 0.9; //184：容器高度 0.9：高度填充百分之九十

    //等所有图片都加载完毕再动态计算图片宽高进行调整

    window.onload=DynamicSetImageWithHeight;

    //动态调整宽高函数

     function DynamicSetImageWithHeight() {

        selector.each(function () {

            var width = $(this).width();

            var height = $(this).height();

            if (width > containerWidth) {

                height = height * containerWidth / width;

                width = containerWidth;

            }

            if (height > containerHeight) {

                width = width * containerHeight / height;

                height = containerHeight;

            }

            width = parseInt(width);

            height = parseInt(height);

            $(this).css({ width: width.toString() + "px", height: height.toString() + "px" });

        });

        selector.fadeIn();

    };

</script>

写个js动态调整图片宽高 （原创）的更多相关文章

  1. JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

  2. 转载：JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

  3. js不需要知道图片宽高的懒加载方法（经过实际测试，不加宽高仍然是无法正常加载的，设置height:auto,height:100%，仍然显示高度为0）

    js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...

  4. JS实现图片宽高的等比缩放

    关于图片宽高的等比缩放,其实需求就是让图片自适应父容器的宽高,并且是等比缩放图片,使图片不变形. 例如,需要实现如下的效果: 要实现上面的效果,需要知道图片的宽高,父容器的宽高,然后计算缩放后的宽高. ...

  5. iOS根据文字字数动态确定Label宽高

    我们有时候在写项目的时候,会碰到,意见反馈,还有其他地方,讲座活动细则等需要大篇展示的文本, 因为每次服务器返回的内容大小不一,所以需要动态的调整label的宽高: 在ios 6 的时候可以: -(v ...

  6. php 图片上传的公共方法（按图片宽高缩放或原图）

    写的用于图片上传的公共方法类调用方法: $upload_name='pic';$type = 'logo_val';$file_name = 'logo_' . $user_id .create_st ...

  7. 根据字符长度动态确定UIlabel宽高

    iOS7中用以下方法 - (CGSize)sizeWithAttributes:(NSDictionary *)attrs; 替代过时的iOS6中的- (CGSize)sizeWithFont:(UI ...

  8. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  9. iOS_根据文字字数动态确定Label宽高

    iOS7中用以下方法 CGSize 替代过时的iOS6中的- (CGSize)sizeWithFont:(UIFont *)font 方法 // iOS7_API_根据文字 字数动态确定Label宽高 ...

随机推荐

  1. 关于VirtualBox与锐捷冲突导致锐捷不断掉线的问题的解决办法

    和VM一样,virtualBox也是和锐捷冲突,网上有一些方法是禁用虚拟网卡,但是还是会导致锐捷客户端掉线,除非使用wifi 第一个解决办法: 偶然看到一个解决办法是,在锐捷客户端登陆之后,打开任务管 ...

  2. oracle-3种工具使用

    1:原命令行,dos 2:sqlplus,图形界面 3:isqlplus,网页版的.(假如自己机器无法安装oracle,可通过别人ip地址去使用oracle,http://ip:5560/isqlpl ...

  3. vue-router在同一个路由下切换，取不到变化的路由参数

    最近用vue写项目的时候碰到一个问题,在同一个页面下跳转,路由地址不变,路由参数有变化,一开始只是在data里取路由的参数,发现根本取不到变化的路由参数. 例如:订单列表也跳转详情页,跳转方法如下 & ...

  4. angular搭建

    脚手架工具:angular-cli 1. npm install -g @angular/cli 2.ng new xxx 3.cd xxx , ng serve

  5. 【转】VMWare vCenter 6.0安装配置

    版权声明: 专注于"GIS+"前沿技术的研究与交流,将云计算技术.大数据技术.容器技术.物联网与GIS进行深度融合,探讨"GIS+"技术和行业解决方案:文章允许 ...

  6. BZOJ 1579: [Usaco2009 Feb]Revamping Trails 道路升级 分层图最短路 + Dijkstra

    Description 每天,农夫John需要经过一些道路去检查牛棚N里面的牛. 农场上有M(1<=M<=50,000)条双向泥土道路,编号为1..M. 道路i连接牛棚P1_i和P2_i ...

  7. 【剑指Offer】15、反转链表

      题目描述:   输入一个链表,反转链表后,输出新链表的表头.   解题思路:   本题比较简单,有两种方法可以实现:(1)三指针.使用三个指针,分别指向当前遍历到的结点.它的前一个结点以及后一个结 ...

  8. 3分钟实现小程序唤起微信支付 Laravel教程

    微信支付的接入,如果不使用成熟的开发包,将是巨大的工作量. 依赖 EasyWechat 先在 laravel 项目中依赖 easywechat 这个包 composer require "o ...

  9. javascript/jquery获取地址栏url参数的方法

    1.jquery获取url window.location.href; 2.通过javascript是如何获取url中的某个参数 function getUrlParam(name) { var re ...

  10. Java代码模拟http请求的两种方式

    z这里用百度地图的逆地理编码接口为例, 第一种方式:(通过jdk中的java.net包) 引入工具类 import java.net.URL; import java.net.URLConnectio ...