function resizeImg(img,oAW,oAH){
var oimgW = img.width,
oimgH = img.height,
oimg = img,
oY = (oimgH/oimgW).toFixed(2),
oX = (oimgW/oimgH).toFixed(2);
if(oimgW <= oAW&&oimgH <= oAH){//图片高和宽比指定的宽高都小
oimg.style.height = oimgH+'px';
oimg.style.width = oimgW+'px';
} else if(oimgW >= oAW&&oimgH >= oAH){//图片高和宽比指定的宽高都大
if(oY*oAW>=oAH){ //图片高比宽大
oimg.style.height = oAH+'px';
oimg.style.width = oX*oAH+'px';
}else{ //图片高比宽小
oimg.style.height = oY*oAW+'px';
oimg.style.width = oAW+'px';
}
}else if(oimgW>oAW &&oimgH < oAH){//图片宽比指定宽大,高比指定的小
oimg.style.height = oY*oAW+'px';
oimg.style.width = oAW+'px';
}else if(oimgW<oAW &&oimgH > oAH){//图片宽比指定宽小,高比指定的大
oimg.style.height = oAH+'px';
oimg.style.width = oX*oAH+'px';
}
}
function resizeImgMid(img,oAW,oAH){
var oimgW = img.width,
oimgH = img.height,
oimg = img,
oY = (oimgH/oimgW).toFixed(2),
oX = (oimgW/oimgH).toFixed(2);
if(oimgW <= oAW&&oimgH <= oAH){//图片高和宽比指定的宽高都小
oimg.style.height = oimgH+'px';
oimg.style.width = oimgW+'px';
oimg.style.marginLeft = 1/2*(oAW-oimgW)+'px';
oimg.style.marginTop = 1/2*(oAH-oimgH)+'px';
} else if(oimgW >= oAW&&oimgH >= oAH){//图片高和宽比指定的宽高都大
if(oY*oAW>=oAH){ //图片高比宽大
oimg.style.height = oAH+'px';
oimg.style.width = oX*oAH+'px';
oimg.style.marginLeft = 1/2*(oAW-oX*oAH)+'px';
oimg.style.marginTop = 0;
}else{ //图片高比宽小
oimg.style.width = oAW+'px';
oimg.style.height = oY*oAW+'px';
oimg.style.marginLeft = 0;
oimg.style.marginTop = 1/2*(oAH-oY*oAW)+'px';
}
}else if(oimgW>oAW &&oimgH < oAH){//图片宽比指定宽大,高比指定的小
oimg.style.height = oY*oAW+'px';
oimg.style.width = oAW+'px';
oimg.style.marginLeft = 0;
oimg.style.marginTop = 1/2*(oAH-oY*oAW)+'px';
}else if(oimgW<oAW &&oimgH > oAH){//图片宽比指定宽小,高比指定的大
oimg.style.height = oAH+'px';
oimg.style.width = oX*oAH+'px';
oimg.style.marginLeft = 1/2*(oAW-oX*oAH)+'px';
oimg.style.marginTop = 0;
}
}

牛掰的图片等比缩放js代码的更多相关文章

  1. 阻止pc端浏览器缩放js代码

    阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable= ...

  2. 外贸建站之图片预加载JS代码分享

    外贸建站之图片预加载JS代码分享 function preloadimg() { setTimeout(function() { new Image().src = "images/2017 ...

  3. 图片左右滚动的js代码

    html代码 <div class="demo" id="demo" style="overflow:hidden; width:660px; ...

  4. 网站图片的轮播JS代码

    这是几个网站的轮播JS效果,实现图片按照时间来切换,目前有几个站实现该功能,特别是浴室柜网站改版前,以下就是JS具体内容可以自己改下路径就可以用的linkarr = new Array();picar ...

  5. 网页上图片点击放大js代码

    //图片弹出事件 function showPict(path) { src = path; var mask = "<div style = 'position: absolute; ...

  6. iphone手机端图片错位修正的js代码

    <script type="text/javascript"> $(function(){ // 获取终端的相关信息 var Terminal = { // 辨别移动终 ...

  7. 做了一个图片等比缩放的js

    做了一个图片等比缩放的js 芋头 发布在view:8447   今天改了一下博客的主题,发现博客主题在ie6下变样了,后来发现是因为某篇文章里的某个图片太大了撑开了容器,导致样式错位,前几天公司需求里 ...

  8. previewImage.js图片预览缩放保存插件

    previewImage.js好用的图片预览缩放保存插件

  9. 图片的滑动缩放html、css、js代码

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. DNA Sorting(排序)

    欢迎参加——BestCoder周年纪念赛(高质量题目+多重奖励) DNA Sorting Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: ...

  2. 计算机管理cmd命令行

    给你一个资料,想必对你来讲有保存价值: 开始菜单中的“运行”是通向程序的快捷途径,输入特定的命令后,即可快速的打开Windows的大部分程序,熟练的运用它,将给我们的操作带来诸多便捷. winver ...

  3. 更新-----Scripts:执行双网卡绑定

    #!/bin/bash #------------------------------------------------------------------------------- # Name: ...

  4. java学习之部分笔记2

    1.变量 实例变量和局部变量 实例变量系统会自动初始化为0和null(string),局部变量必须设定初始值. 静态方法里只能引用静态变量 数据类型的自动转换! int—>long 2.构造方法 ...

  5. android一些常用的代码1(收藏)

    以下内容来自多个开源项目的整理和自己的项目积累. 1.拨打电话 public static void call(Context context, String phoneNumber) { conte ...

  6. ios 添加多个target 管理 多个版本文件

    1. 添加一个Target 这里是添加一个Test 项目 这里添加新的target Test与Release 也是同上的操作

  7. (Access denied for user 'root'@'localhost' (using password: NO))

    先记一下遇到的问题: 项目使用mySql服务器,用户名密码正常,权限齐全,mySql服务已启动,但运行java web程序时显示: 目前正在解决 解决方案: 1.打开MySQL目录下的my.ini文件 ...

  8. linux学习笔记之线程

    线程同步机制:http://www.cnblogs.com/zheng39562/p/4270019.html 一.基础知识 1:基础知识. 1,线程需要的信息有:线程ID,寄存器,栈,调度优先级和策 ...

  9. 【搜索引擎Jediael开发4】V0.01完整代码

    截止目前,已完成如下功能: 1.指定某个地址,使用HttpClient下载该网页至本地文件 2.使用HtmlParser解释第1步下载的网页,抽取其中包含的链接信息 3.下载第2步的所有链接指向的网页 ...

  10. 多行文本垂直居中div高度确定

    父元素高度确定的多行文本.图片.块状元素的垂直居中的方法有两种: 方法一:将内容写入table(包括tbody.tr.td)中的td标签里,同时设置 vertical-align:middle. cs ...