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. 一个原生js写的加减乘除运算

    根据我的经验我说的再多也没人看,不过还是简单介绍下效果吧,可以选择+,-,*,/,去计算数据,喜欢的话就粘贴复制自己看去吧! <!DOCTYPE html PUBLIC "-//W3C ...

  2. java如何引入接口中定义的常量

    接口 (A.java) : package config; public interface A { String PROJECT_ROOT_DIR = System.getProperty(&quo ...

  3. [LeetCode]题解(python):142-Linked List Cycle II

    题目来源: https://leetcode.com/problems/linked-list-cycle-ii/ 题意分析: 给定一个链表,如果链表有环,返回环的起始位置,否则返回NULL.要求常量 ...

  4. Javascript 设计模式笔记

    设计模式太多了 还有些模式概念非常接近(比如观察者 中介者 和 事件发布/订阅模式) 构造器模式 var newObject = {} var newObject = new XXX(); 模块模式 ...

  5. discuz_style_default.xml 修改

    <?xml version="1.0" encoding="ISO-8859-1"?> <root> <item id=" ...

  6. 射频识别技术漫谈(28)——基于MF1射频卡的酒店门锁设计

    电子门锁是现代星级酒店管理电子化.智能化的重要电子设备.相较于传统的机械锁,基于RFID技术的电子门锁使用方便,易于管理,安全性高,可实现对开锁用户的分优先级自动管理,对房间入住信息实现自动统计与报表 ...

  7. swift学习第五章-字典的使用

    //以下是关于字典的 //字典的格式[key:value] //字典能够存放基本类型和对象类型的 //声明一个字典 var dictionary1=["key1":"鸭鸭 ...

  8. window.open 使用方法

    window.open(url,name,features,replace); //parameters 解释: URL:需要打开的URL Name:打开URL的标题 Feature:控制窗口大小的参 ...

  9. zoj 1539 Lot

    /*理解题意后,发现最后剩下的都是个数并不是和奇数偶数等有直接的关系,所以我们直接从数量入手 比如11会被分为5,6.5再分2,3.6再分3,3只要剩下三个就算一种,少于三个不用算.大于3个继续分 很 ...

  10. Ubuntu_16.04 配置 Apache Rwrite URL 重写

    Ubuntu Apache配置Rwrite URL重写 0. apache目录