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 ...
随机推荐
- Hbase Region Server 启动失败
错误如下:Master rejected startup because clock is out of sync org.apache.hadoop.hbase.ClockOutOfSyncExce ...
- thinkPHP的常用配置项
'URL_PATHINFO_DEPR'=>'-',//修改URL的分隔符 'TMPL_L_DELIM'=>'<{', //修改左定界符 'TMPL_R_DELIM'=>'}&g ...
- Android 汉字转拼音之工具篇
/* * Copyright (C) 2011 The Android Open Source Project * * Licensed under the Apache License, Versi ...
- VS中,NUnit适合测试者尽心开发自动化测试,而Unit适合开发者开发单元测试。
1.整合Visual Studio和NUnit 在Visual Studio 2010中,通过安装NUnit插件,可以不使用外部客户端,直接运行测试. 当然,貌似在最新版本的VS2012中,安装过NU ...
- Spring 装配Bean
Spring 装配Bean 装配解释: 创建应用对象之间协作关系的的行为通常称为装配(wiring),这也是依赖注入的本质 依赖注入是Spring的基础要素 一 : 使用spring装配Bean基础介 ...
- Windows-1252对Latin1编码有改变(并不完全兼容),而且Latin1缺失了好多西欧字符(法语,德语,西班牙语都有)
主要是80到9F的编码被改掉了.从latin1的控制字符,变成了可以输出的可见字符. latin1编码: ISO-8859-1 x0 x1 x2 x3 x4 x5 x6 x7 x8 x9 xA x ...
- RedisService
package com.sprucetec.bone.common.redis;import com.alibaba.fastjson.JSON;import org.springframework. ...
- [VC6 console]调用API获取手机归属地
为了完成作业,就偷个懒糊了个获取手机归属地的程序,.我原本写的是MFC版本的,但是由于MFC的代码不是很通用,加上我没有学MFC的时候看别人MFC代码只能干瞪眼,看不懂,所以便改成控制台版本的了.但这 ...
- Azure Traffic Manager 现可与 Azure 网站集成!
编辑人员注释:本文章由 WindowsAzure 网站团队高级专家级工程师 Jim Cheshire撰写. AzureTraffic Manager 已经推出有一段时间,这是一种跨多个区域管理网 ...
- ios中的银联支付
场景 随着移动互联网的迅猛发展,移动互联已经深深地融入我们的生活.其中,支付方式也是我们生活中经常遇到的情况.所以,在我们的应用中加入支付功能是多么的重要.现在主流的支付接口,一是支付宝类的,一是银联 ...