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. NET基础课--应用程序编译和执行1

  2. 面试前的准备---C#知识点回顾----01

    过完年来,准备找份新工作,虽然手里的工作不错,但树挪死,人挪活.咱不能一直在一个坑里生活一辈子,外面的世界毕竟是很美好的. 为了能正常的找到自己中意的工作,最近是将所有的基础知识拿出来复习了一次.仅作 ...

  3. .Net+MySQL

    网上很少用.Net+MySQL的组合的,所以资料比较少,发现一个赶紧分享给大家. 通常数据库连接字符串为:Database=dbname;Data Source=192.168.1.1;Port=33 ...

  4. VS插件集

    Unit Test Generator  很好用的测试插件 注:在VS2015中,改名为Test generator Nunit extension了. ReSharperPlatformVs11   ...

  5. C# 单例模式(转)

    C#设计模式学习笔记-单例模式 最近在学设计模式,学到创建型模式的时候,碰到单例模式(或叫单件模式),现在整理一下笔记. 在<Design Patterns:Elements of Resuab ...

  6. Graham算法—二维点集VC++实现

    一.凸包定义 通俗的说就是:一组平面上的点,求一个包含所有点的最小凸多边形,这个最小凸多边形就是凸包. 二.Graham算法思想 概要:Graham算法的主要思想就是,最终形成的凸包,即包围所有点的凸 ...

  7. zookeeper_01:zookeeper概述

    应对场景: 相对于开发在一台计算机上运行的单个程序,如何让一个应用中的多个独立的程序协同工作是一件非常困难的事情.开发这样的应用,很容易让很多开发人员陷入如何使多个程序协同工作的逻辑中,最后导致没有时 ...

  8. C++程序设计实践指导1.8求指定范围内的所有素数改写要求实现

    改写要求1:以指针为数据结构动态开辟存储空间 #include <cstdlib> #include <iostream> using namespace std; class ...

  9. (转+原)android获取系统时间

    参考的网站如下: http://c.biancheng.net/cpp/html/144.html http://www.linuxidc.com/Linux/2012-03/55909.htm 代码 ...

  10. Java三大特征之多态(三)

    面向对象编程有三大特性:封装.继承.多态. 封装隐藏了类的内部实现机制,可以在不影响使用的情况下改变类的内部结构,同时也保护了数据.对外界而已它的内部细节是隐藏的,暴露给外界的只是它的访问方法. 继承 ...