<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. android学习-第二讲（修改项目名称和图标，log，过滤器）

    一.在app/src/main/res下有 AndroidManifest.xml打开,打开后如下图1 二.日志工具log log.v()  log.d()  log.i()  log.w()  lo ...

  2. Apache安装简述

    软件下载地址:http://pan.baidu.com/s/1o8oexKI 1.httpd -k install 2.httpd -k restart 3.启动bin文件夹里的httpd.exe 4 ...

  3. 浅谈Java三大框架与应用

    前言:对于一个程序员来说,尤其是在java web端开发的程序员,三大框架:Struts+Hibernate+Spring是必须要掌握熟透的,因此,下面谈谈java三大框架的基本概念和原理. JAVA ...

  4. C#程序集版本控制文件属性祥解

    using System.Reflection; using System.Runtime.CompilerServices; using System.Runtime.InteropServices ...

  5. [置顶] Every Programmer Should Know These Latency Numbers

    转自:   https://dzone.com/articles/every-programmer-should-know Every Programmer Should Know These Lat ...

  6. 数据挖掘系列 (1) 关联规则挖掘基本概念与 Aprior 算法

    转自:http://www.cnblogs.com/fengfenggirl/p/associate_apriori.html 数据挖掘系列 (1) 关联规则挖掘基本概念与 Aprior 算法 我计划 ...

  7. 将现有硬盘（分区）无损创建为RAID1

    背景 如果现在有一块硬盘(分区)正在使用,如果要设置成RAID1,并不需要将数据拷出,然后创建RAID1. 可以先将此硬盘设置成降级RAID1,然后添加新硬盘再激活RAID1即可,整个过程数据无损. ...

  8. workspace 配置

    1.新建workspace 在配置好相关信息前,请勿引入工程代码,避免环境不完整的情况下编译进入长时间等待 2.设置工作窗体结构 建议使用Java模式开发窗体设置 3. 编码 工程全部采用UTF-8编 ...

  9. FusionCharts，双折线图和双柱状图

    一个电商项目中,用到了"双柱状图",对比 当前库存和累计库存. 网上找了好几个贴子,才找到具体用法. 代码整理下,以备不时之需. 效果图-双折线图 效果图-双柱状图 <%@ ...

  10. 【codeforces 798C】Mike and gcd problem

    [题目链接]:http://codeforces.com/contest/798/problem/C [题意] 给你n个数字; 要求你进行若干次操作; 每次操作对第i和第i+1个位置的数字进行; 将 ...