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 ...
随机推荐
- PADS Layout怎样放置间距一样的同一种元件
少数元件的话,栅格设置是最好的,即将栅格设置成你要放置元件的间距,然后逐个移动元件放置.如果元件几十上百个,这样做就累死人了,此时就得设置阵列.按顺序选择你要放置的元件-右键-create arry, ...
- [置顶] C++基础之六:运算符的重载
网上太多有关运算符的重载了,但是写的太过的详细,不适合新手入门,特别是那什么++和--的前增量后增量重载,一元二元运算符重载,特殊运算符,下标运算符,new和delete,甚至是指针运算符的重载,吓退 ...
- When Is Cheryl's Birthday
大早上起来逛微博,看见@西瓜大丸子汤Po的一个逻辑题,遂点开看之... 原文链接:http://nbviewer.ipython.org/url/norvig.com/ipython/Cheryl.i ...
- 不允许在单例对象中创建Srping容器
spring.net在使用的时候,不允许在单例对象中创建Srping容器 需要将实例化模式转为单例singleton=“false”
- WCF 双工通信
注释:本学习是参考Artech大神的资料: 在WCF 实现双工通信 在这里我就不介绍双工通信的概念了,我写博客的目的是检测自己掌握情况,看我wcf通信后,觉得纸上得来终觉浅,绝知此事要躬行. 我使用的 ...
- Mac环境下Myeclispe2015工具的安装与破解
链接地址:http://www.07net01.com/2015/08/919753.html 07net01.com 发布于 2015-08-30 22:19:37 分类:IT技术 阅读(306) ...
- MicroStrategy笔试
1. coding判定二叉树是否是有序二叉树 2. 一个有序数组A(buffer足够大),和一个有序数组B,设计算法,merge两个数组后有序,不使用任何额外的内存空间 3. 100个点灯问题,初始状 ...
- 5.6.3.7 localeCompare() 方法
与操作字符串有关的最后一个方法是localeCompare(),这个方法比较两个字符串,并返回下列值中的一个: 如果字符串在字母表中应该排在字符串参数之前,则返回一个负数(大多数情况下是-1,具体的值 ...
- 关于tomcat的clean
1 添加了一个web项目到tomcat,然后进行clean的时候,根目录实际上是在WebContent下,也就是说存放在WebContent目录下的所有文件在clean的时候才会被添加到tomcat对 ...
- ButterKnife 绑定 RadioGroup
原则上 ButterKnife 是不支持 RadioGroup 的, 可以通过以下方法添加RadioButton的点击事件: @OnClick({ R.id.radio_btn1, R.id.radi ...