<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. 联想笋尖S90（S90-t 、S90-u）解锁BootLoader

    工具下载链接: http://pan.baidu.com/s/1eSgZuka 备用下载链接: http://pan.baidu.com/s/1dFKqSId 本篇教程,仅限于联想笋尖S90(S90- ...

  2. 查看Oracle数据库表空间大小，是否需要增加表空间的数据文件

    在数据库管理中,磁盘空间不足是DBA都会遇到的问题,问题比较常见. --1查看表空间已经使用的百分比 Sql代码 select a.tablespace_name,a.bytes/1024/1024 ...

  3. 如何用js代码实现图片切换效果

    通过点击按钮,实现图片的隐藏与显现,切换. 实现代码:<style> .a{ width: 300px; height: 300px; border: 1px solid black; } ...

  4. JNDI连接池连接Oracle数据库

    今天做了一个评论的小功能,要求用JNDI连接池连接Oracle数据库,以前只是测试了是否连接的上,现在没想到一个JNDI连接池连接Oracle数据库,纠结了好久,原来都是Oracle数据库的问题,这是 ...

  5. 利用jsonp进行Ajax跨域请求

    在进行Ajax请求的时候经常会遇到跨域的问题,这个时候一般就会用到jsonp. 关于json和jsonp,网上有很多原理解释,这里就不多赘述,需要的自行搜索. 下面是一个简单的ajax跨域请求示例: ...

  6. CNN结构：用于检测的CNN结构进化-分离式方法

    前言: 原文链接:基于CNN的目标检测发展过程       文章有大量修改,如有不适,请移步原文. 参考文章:图像的全局特征--用于目标检测 目标的检测和定位中一个很困难的问题是,如何从数以万计的候选 ...

  7. C#异步Async、Task、Await

    参考http://www.cnblogs.com/jesse2013/p/async-and-await.html 事例: static void Main(string[] args) { ; i ...

  8. C# 获得剪贴板内容和 richTextBox部分文本设置颜色

    try { MemoryStream vMemoryStream = iData.GetData("Html Format") as MemoryStream; if (vMemo ...

  9. 团体程序设计天梯赛-练习集-L1-041. 寻找250

    L1-041. 寻找250 对方不想和你说话,并向你扔了一串数…… 而你必须从这一串数字中找到“250”这个高大上的感人数字. 输入格式: 输入在一行中给出不知道多少个绝对值不超过1000的整数,其中 ...

  10. python sqlalthemy 总结

    orm 数据状态的预知识 瞬时状态:刚创建的对象还没有被Session持久化.缓存中不存在这个对象的数据并且数据库中没有这个对象对应的数据为瞬时状态这个时候是没有OID. 持久状态:对象经过Sessi ...