function ResizePic() {
        $('img').each(function () {
            var maxWidth = 450; // 图片最大宽度
            var maxHeight = 750;    // 图片最大高度
            var ratio = 0;  // 缩放比例
            var width = $(this).width();    // 图片实际宽度
            var height = $(this).height();  // 图片实际高度

// 检查图片是否超宽
            if (width > maxWidth) {
                //计算缩放比例
                ratio = maxWidth / width;
                $(this).css("width", maxWidth); // 设定实际显示宽度
                height = height * ratio;    // 计算等比例缩放后的高度
                $(this).css("height", height);  // 设定等比例缩放后的高度
            }

// 检查图片是否超高
            if (height > maxHeight) {
                ratio = maxHeight / height;
                $(this).css("height", maxHeight);   // 设定实际显示高度
                width = width * ratio;    // 计算等比例缩放后的高度
                $(this).css("width", width * ratio);    // 设定等比例缩放后的高度
            }
        });

}

Js动态设置Img大小的更多相关文章

  1. js动态设置padding-top遇到的坑

    我想通过js动态设置元素padding-top的百分比值:以下几种都是无法设置成功的: // setAttribute设置padding-top并且转换为百分比 imageBox.setAttribu ...

  2. 【微信小程序】动态设置图片大小

    我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性:1.src              图片资源地址2.mode          图片裁剪.缩放的模式3.binderror   ...

  3. Dynamic CRM 2013学习笔记(二十八)用JS动态设置字段的change事件、必填、禁用以及可见

    我们知道通过界面设置字段的change事件,是否是必填,是否可见非常容易.但有时我们需要动态地根据某些条件来设置,这时有需要通过js来动态地控制了. 下面分别介绍如何用js来动态设置.   一.动态设 ...

  4. js动态设置窗体位置

    1设置登录框的js,动态设置高度等 <script> $(document).ready(function () { $() / + "px"); $("in ...

  5. js动态设置根元素的rem方案

    方案需求: rem 单位在做移动端的h5开发的时候是最经常使用的单位.为解决自适应的问题,我们需要动态的给文档的根节点添加font-size 值. 使用mediaquery 可以解决这个问题,但是每一 ...

  6. js动态设置输入框字体/颜色

    动态设置文本框颜色: 主要是利用javascript中的触发事件onfocus和onblur <script language="javascript" type=" ...

  7. JS动态设置css的几种方式

    1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element. ...

  8. Js动态设置rem来实现移动端字体的自适应

    //设置根元素字体 var win = window, doc = document; function setFontSize() { var winWidth = $(window).width( ...

  9. js 动态设置键值对数组 ,类似于 java 的Map 类型

    1.前言 我想设置一个数据  var json = {a1 :1  , a2 :2  , a3 :3  .....} 这样的动态数据 ,怎么写呢? 2.正确写法 var json = []; for ...

随机推荐

  1. watch命令详解(linux)

    watch命令详解(linux)         在维护系统时经常需要实时查看系统的运行情况,比如实时的系统连接数之类的.在linux可以通过watch命令,实时监控每一条命令执行的结果动态变化.   ...

  2. bzoj 1303: [CQOI2009]中位数图

    题目链接 给n个数,一个值b, 统计所有以b为中位数的序列的个数.序列长度为奇数.数字在1-n之间, 每个数只出现一次. 如果一个数大于b, 那么将他赋值为1, 小于b赋值为-1, 记录数组中b出现的 ...

  3. iOS 开发技巧

    快速移除键盘 之前一直是讲view的父类改成control,然后加一个全屏按钮,点击让键盘消失.这个方法要写好多代码,现在一个比较好的方法是重写一个下面的方法: - (void)touchesBega ...

  4. 类比的方法学习Performance_schema

    引用自:http://www.javacoder.cn/?p=332 MySQL在5.6版本中包含了一个强大的特性——performance-schema,合理的使用这个数据库中的表,能为我们解决一些 ...

  5. Linux ---> 监控JVM工具

    Linux ---> 监控JVM工具shkingshking 发布时间: 2013/10/10 01:27 阅读: 2642 收藏: 26 点赞: 1 评论: 0 JDK内置工具使用 jps(J ...

  6. Android 在一个程序中启动另一个程序

    Android 开发有时需要在一个应用中启动另一个应用,比如Launcher加载所有的已安装的程序的列表,当点击图标时可以启动另一个应用.一般我们知道了另一个应用的包名和MainActivity的名字 ...

  7. HTTP使用BASIC认证的原理及实现方法(还有NTLM方法,比较复杂)

    一.   BASIC认证概述 在HTTP协议进行通信的过程中,HTTP协议定义了基本认证过程以允许HTTP服务器对WEB浏览器进行用户身份证的方法,当一个客户端向HTTP服务 器进行数据请求时,如果客 ...

  8. Delphi内存操作API函数(备查,并一一学习)

    Delphi内存操作API函数System.IsMemoryManagerSet;System.Move;System.New;System.ReallocMem;System.ReallocMemo ...

  9. 利用KVC实现无需协议的委托模式

    在<精通iOS开发>一书中看到的技巧.假设BIDTaskListController是一个列表,点击列表上的一项将会导航到BIDTaskDetailController,在BIDTaskD ...

  10. Css Rest 方法

    在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是 重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的 ...