<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. JavaScript中变量的类型

    变量的类型是指变量的值所属的数据类型,可以是数值型.字符串型和布尔型等,因为JavaScript是一种弱类型的程序语言,所以可以把任意类型的数据赋值给变量. 下面是一个关于变量类型的例子.在这个例子中 ...

  2. more-less-cat-tail-head 命令简单分析

    区别:cat一次性把文件内容全部显示出来,管你看不看得清,显示完了cat命令就返回了,不能进行交互式 操作,适合察看内容短小.不超过一屏的文件:more比cat强大一点,支持分页显示,你可以ctrl+ ...

  3. OpenCV:OpenCV目标检测Hog+SWindow源代码分析

    参考文章:OpenCV中的HOG+SVM物体分类 此文主要描述出HOG分类的调用堆栈. 使用OpenCV作图像检测, 使用HOG检测过程,其中一部分源代码如下: 1.HOG 检测底层栈的检测计算代码: ...

  4. 排序算法Java版

    选择排序: public static void selectSort(int[]a) { int minIndex=0; int temp=0; if((a==null)||(a.length==0 ...

  5. angular搭建

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

  6. Python【每日一问】35

    问: 基础题: 从键盘输入4个数字,各数字采用空格分隔,对应为变量x0,y0,x1,y1.计算(x0,y0)和(x1,y1)两点之间的距离,输出结果保留1位小数. 比如,键盘输入:0 1 3 5,屏幕 ...

  7. python jieba分词（添加停用词，用户字典 取词频

    中文分词一般使用jieba分词 1.安装 pip install jieba 2.大致了解jieba分词 包括jieba分词的3种模式 全模式 import jieba seg_list = jieb ...

  8. pytorch实战（7）-----卷积神经网络

    一.卷积: 卷积在 pytorch 中有两种方式: [实际使用中基本都使用 nn.Conv2d() 这种形式] 一种是 torch.nn.Conv2d(), 一种是 torch.nn.function ...

  9. js中writeln()方法

    writeln( ) 方法与 write( ) 方法几乎一样,差别仅在于是前者将在所提供的任何字符串后添加一个换行符.在 HTML 中,这通常只会在后面产生一个空格:不过如果使用了 <PRE&g ...

  10. 利用Redis锁解决高并发问题

    这里我们主要利用Redis的setnx的命令来处理高并发. setnx 有两个参数.第一个参数表示键.第二个参数表示值.如果当前键不存在,那么会插入当前键,将第二个参数做为值.返回 1.如果当前键存在 ...