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 ...
随机推荐
- [置顶] 修改Android开机画面之rle制作
第一个动画: Bootloader开机使用的图片是linux.bmp,长高分别是120*120,色度是32,所以可以拿相同格式图片替换,进行编译烧写即可. 第二个图片:内核logo 这个修改方式,我在 ...
- 《JavaScript+DOM编程艺术》的摘要(二)---DOM中的几个方法
//DOM: //对象是一种独立的数据集合,与某个特定对象相关联的变量被称为这个对象的属性,通过某个特定对象可以为之调用的函数被称为这个对象的方法 // //4个非常实用的DOM方法: //检索特定元 ...
- 找出n个数中出现了奇数次的两个数
如果是找只出现了奇数次的一个数, 那么我们从头异或一遍就可以. 那么如何找出现了奇数次的两个数呢? 首先我们还是从头异或一遍, 然后结果肯定不为0, 对于异或出来的结果, 如果这个数的某一位是1, 说 ...
- 一个简单的web框架实现
一个简单的web框架实现 #!/usr/bin/env python # -- coding: utf-8 -- __author__ = 'EchoRep' from wsgiref.simple_ ...
- JavaEE Tutorials (14) - 用实体图创建获取计划
14.1实体图基础185 14.1.1默认实体图186 14.1.2在持久化操作中使用实体图18614.2使用命名实体图187 14.2.1对实体类应用命名实体图注解187 14.2.2从命名实体图获 ...
- oracle dataguard 角色切换
- 图画hadoop -- 生态圈
- iOS 自定义各类bar的属性
在iOS应用开发中,经常需要为导航栏和标签栏设置相同的主题,一个一个去设置的话,就太麻烦了,可以通过对应用中所有的导航栏和标签栏同意设置背景.字体等属性. 如:创建一个继承自“UINavigation ...
- 判断联网wifi
UIApplication *app = [UIApplication sharedApplication]; NSArray *children = [[[app valueForKeyPath:@ ...
- HTML,JAVASCRIPT代码美化demo
看见别人的博客里面的源码展示十分漂亮,一时兴起,就自己做了个. 当然,网上已经有别人做好的非常完善的codemirror.highlight.prettify.而我在写自己的这个小demo之前呢,也没 ...