<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. PANDAS 数据分析初学者教程

    Pandas 初学者教程       2018-05-19 六尺巷人 对于数据科学家,无论是数据分析还是数据挖掘来说,Pandas是一个非常重要的Python包.它不仅提供了很多方法,使得数据处理非常 ...

  2. python--5、包

    包 包,即一个包含__init__.py文件的文件夹,创建包的目的也就是为了用文件夹将文件(模块)组织起来.python3中,即使包里没有__init__.py文件,仍能import使用.而pytho ...

  3. ROS:使用ubuntuKylin17.04安装ROS赤xi龟

    使用ubuntuKylin17.04安装 参考了此篇文章:SLAM: Ubuntu16.04安装ROS-kinetic 重复官方链接的步骤也没有成功. 此后发现4.10的内核,不能使用Kinetic. ...

  4. Caffe+Kubuntu16.04_X64+CUDA 8.0配置

    前言: 经过尝试过几次Caffe,theano,MxNet之后,很长时间没有进行caffe的更新,此次在Ubuntu16.04下安装Caffe,折腾了一天时间,终于安装成功. 参考链接:Caffe+U ...

  5. （转）OL记载Arcgis Server切片

    http://blog.csdn.net/gisshixisheng/article/details/47955787 概述: 本文讲述如何在OpenLayers中调用Arcgis Server切片并 ...

  6. Js 字符串中提取数字

    一 parseInt()方法: 首先想到的是js提供的parseInt方法,例子: var str ="4500元"; var num = parseInt(str); alert ...

  7. eas之kdtable格式化

    设置表.列.行或单元的格式化字符串 // 设置表table.getStyleAttributes().setNumberFormat(formatString); // 设置列column.getSt ...

  8. encodeURI和encodeURIComponent的区别？

    encodeURI方法不会对下列字符编码 ASCII字母.数字.~!@#$&*()=:/,;?+' encodeURIComponent方法不会对下列字符编码 ASCII字母.数字.~!*() ...

  9. X5内核浏览器，video兼容

    使用vue-video-player在移动端微信内置浏览器打开,点击视频自动全屏问题. 参考官方 API 是 H5 同层浏览器的原因,可通过设置video属性来处理. <video-player ...

  10. sql积累

    mysql 修改一列自增长 set @rownum=0; update a SET id = ( select @rownum := @rownum +1 as nid) WHERE id < ...