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 ...
随机推荐
- 监听器和web国际化
一.监听器 1.监听器:监听器就是一个java程序,功能是监听另一个java对象变化(方法调用.属性变更) 2.监听器监听过程:事件源.事件对象.监听器对象.操作事件源 1).存在被监听对象(事件源) ...
- windows下安装testlink
因为项目中一直没有使用任何测试用例管理工具,如果需要的时候都是个人写在的excle里各自保存,因为没有系统的记录当时测试方法和测试用例,每次需要再次测试已有的功能时,因为时间太长,而往往记不得当时是怎 ...
- 关于iPhone
---------------------- 美版有三个版本 A S V A版不能用电信卡,S不能发短信 据说还可能再次上锁 V版目前是大家认为最安全的版本 价格也是比A和S贵的 港版比V版唯一的好处 ...
- 树莓派高级GPIO库,wiringpi2 for python使用笔记(一)安装
网上的教程,一般Python用RPi.GPIO来控制树莓派的GPIO,而C/C++一般用wringpi库来操作GPIO,RPi.GPIO过于简单,很多高级功能不支持,比如i2c/SPI库等,也缺乏高精 ...
- Nuget升级问题
想在项目中通过“Add Library Package Reference”添加Moq,结果出现错误提示说Nuget版本太低. 要升级Nuget需要先卸载原来的Nuget. 1.在控制面板,卸载程序里 ...
- 教你看懂C++类库函数定义之三---_stdcall
一切从一个C++ 类库头文件开始,现在在做一个C++的项目,期间用到一个开源的界面库DUILib(类似MFC),这个东西还不错能很容易的写出漂亮的界面,比如QQ的界面,可以去下载下来研究研究,地址:h ...
- 取得phpcms网站下所有栏目的内容链接
今天做了一个小功能,就是取得公司网站的所有文章的内容地址,公司网站是用phpcms 做的,感觉还蛮简单的,记录下: <?php $conf['DB_USER'] = 'user'; $conf[ ...
- ubuntu-12.04.4-server安装
一.系统ISO下载 下载地址:http://www.ubuntu.com/download 根据自己的需求下载,我的电脑配置一般,因此选择32位的. 二.虚拟机配置 ...
- Yii2简单纪要
网上经常拿Yii来类比ROR,从MVC角度,使用体验及代码风格上确实有很多相似的地方.不过看配置文件发现Yii2不止是受rails的影响,同样有不少spring的影子,最明显的就是配置文件中很多IOC ...
- Bootstrap 源码解析
前言 Bootstrap 是个CSS库,简单,高效.很多都可以忘记了再去网站查.但是有一些核心的东西需要弄懂.个人认为弄懂了这些应该就算是会了.源码看一波. 栅格系统 所谓的栅格系统其实就是一种布局方 ...