Js动态设置Img大小
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大小的更多相关文章
- js动态设置padding-top遇到的坑
我想通过js动态设置元素padding-top的百分比值:以下几种都是无法设置成功的: // setAttribute设置padding-top并且转换为百分比 imageBox.setAttribu ...
- 【微信小程序】动态设置图片大小
我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性:1.src 图片资源地址2.mode 图片裁剪.缩放的模式3.binderror ...
- Dynamic CRM 2013学习笔记(二十八)用JS动态设置字段的change事件、必填、禁用以及可见
我们知道通过界面设置字段的change事件,是否是必填,是否可见非常容易.但有时我们需要动态地根据某些条件来设置,这时有需要通过js来动态地控制了. 下面分别介绍如何用js来动态设置. 一.动态设 ...
- js动态设置窗体位置
1设置登录框的js,动态设置高度等 <script> $(document).ready(function () { $() / + "px"); $("in ...
- js动态设置根元素的rem方案
方案需求: rem 单位在做移动端的h5开发的时候是最经常使用的单位.为解决自适应的问题,我们需要动态的给文档的根节点添加font-size 值. 使用mediaquery 可以解决这个问题,但是每一 ...
- js动态设置输入框字体/颜色
动态设置文本框颜色: 主要是利用javascript中的触发事件onfocus和onblur <script language="javascript" type=" ...
- JS动态设置css的几种方式
1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element. ...
- Js动态设置rem来实现移动端字体的自适应
//设置根元素字体 var win = window, doc = document; function setFontSize() { var winWidth = $(window).width( ...
- js 动态设置键值对数组 ,类似于 java 的Map 类型
1.前言 我想设置一个数据 var json = {a1 :1 , a2 :2 , a3 :3 .....} 这样的动态数据 ,怎么写呢? 2.正确写法 var json = []; for ...
随机推荐
- TJU 2944 Mussy Paper 最大权闭合子图
传送门 给你一些东西, 每个东西有一个值,有正有负. 在给一些关系, 选了其中一个物品, 和他有关系的也必须全都选上, 关系是单向的. 问最后的最大价值是多少, 如果小于0输出“ **** ”( ...
- bzoj 1085: [SCOI2005]骑士精神 IDA*
题目链接 给一个图, 目标位置是确定的, 问你能否在15步之内达到目标位置. 因为只有15步, 所以直接ida* #include<bits/stdc++.h> using namespa ...
- python strip()函数介绍
函数原型 声明:str为字符串,s为要删除的字符序列 str.strip(s) 删除str字符串中开头.结尾处,位于 s删除序列的字符 str.lstrip(s) 删除str ...
- 批量添加target属性
<script> addTarget(); function addTarget(){ var oa=document.getElementsByTagName('a'); for(var ...
- 使用 Java 实现 Comet 风格的 Web 应用
参考这个: http://www.ibm.com/developerworks/cn/web/wa-cometjava/
- 改变QTreeView项高的方法(改变Delegate行高,或者::data取数据的时候,根据Qt::SizeHintRole进行判断)
很久之前写过一篇关于QTreeView快速显示超过千万条数据项的方法,如果说那篇文章讲的是QTreeView的内功的话,今天这篇是讲QTreeView的外功,有时我们想改变视图的数据项的行高,那怎么办 ...
- 领域驱动设计系列(2)浅析VO、DTO、DO、PO的概念、区别和用处
PO:persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录.好处是可以把一条记录作为一个对象处理,可以方便的转为其它对象. BO:business object业 ...
- MFC解决Static控件背景透明时文本覆盖重影
通过映射OnCtlColor消息,而后在该函数中使用pDC->SetBkMode(TRANSPARENT)使Static控件背景透明时会出现:文本覆盖重影的问题,当改变控件的文本就会发生新文本与 ...
- Cola:一个分布式爬虫框架 - 系统架构 - Python4cn(news, jobs)
Cola:一个分布式爬虫框架 - 系统架构 - Python4cn(news, jobs) Cola:一个分布式爬虫框架 发布时间:2013-06-17 14:58:27, 关注:+2034, 赞美: ...
- Cocos2d-x基础篇C++
1.C++类和对象 类的公有成员可以使用成员访问运算符(.)访问. (::)是范围解析运算符.调用成员函数是在对象上使用(.)运算符. 2.C++继承(C++中父类称为基类,子类称为派生类) clas ...