牛掰的图片等比缩放js代码
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代码的更多相关文章
- 阻止pc端浏览器缩放js代码
阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable= ...
- 外贸建站之图片预加载JS代码分享
外贸建站之图片预加载JS代码分享 function preloadimg() { setTimeout(function() { new Image().src = "images/2017 ...
- 图片左右滚动的js代码
html代码 <div class="demo" id="demo" style="overflow:hidden; width:660px; ...
- 网站图片的轮播JS代码
这是几个网站的轮播JS效果,实现图片按照时间来切换,目前有几个站实现该功能,特别是浴室柜网站改版前,以下就是JS具体内容可以自己改下路径就可以用的linkarr = new Array();picar ...
- 网页上图片点击放大js代码
//图片弹出事件 function showPict(path) { src = path; var mask = "<div style = 'position: absolute; ...
- iphone手机端图片错位修正的js代码
<script type="text/javascript"> $(function(){ // 获取终端的相关信息 var Terminal = { // 辨别移动终 ...
- 做了一个图片等比缩放的js
做了一个图片等比缩放的js 芋头 发布在view:8447 今天改了一下博客的主题,发现博客主题在ie6下变样了,后来发现是因为某篇文章里的某个图片太大了撑开了容器,导致样式错位,前几天公司需求里 ...
- previewImage.js图片预览缩放保存插件
previewImage.js好用的图片预览缩放保存插件
- 图片的滑动缩放html、css、js代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- Eclipse SVN插件的帐号、password改动
问题描写叙述: Eclipse的SVN插件Subclipse做得非常好,在svn操作方面提供了非常强大丰富的功能.但到眼下为止,该插件对svn用户的概念极为淡薄,不但不能方便地切换用户,并且一旦用户的 ...
- CCCardinalSplineBy概念
cardianl 红衣主教 这个类是样条曲线动作, 其创建函数是CCCardinalSplineBy::create(float duration, cocos2d::CCPointArray *po ...
- poj1184 聪明的打字员(BFS剪枝)
http://poj.org/problem?id=1184 用字符串s存下数字,并把光标位置做一个字符加到s末尾,用map做标记状态是否出现过,然后bfs即可. 不剪枝是过不了的,考虑的两种交换操作 ...
- 【高精度练习+卡特兰数】【Uva1133】Buy the Ticket
Buy the Ticket Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...
- Protobuf完整实例
地址: http://pan.baidu.com/s/1gfLLavD 密码: v7u9 下载,打开,运行,即可.
- eclipse美化,全黑eclipse 保护眼睛
如标题,闲话不多说.有图说明一切.看看这是你想要的嘛? 教程及资源下载地址: http://download.csdn.net/detail/shoneworn/8326097
- WebService应用一例,带有安全验证
1.创建WEB项目,添加WEB服务WebService1.asmx,代码如下: using System; using System.Collections.Generic; using System ...
- 云支付整合Tp3.2.3代码整理
可能比较少的项目用会用到云支付,我之前有个项目就用这个支付,相对于微信支付和支付宝支付他名气太小了,但是很多支付宝或者微信审核不下来就回选择这种支付方式,总体开发比较简单.云支付官网是这么说的“云支付 ...
- css基础之 图片瀑布流布局:用CSS+DIV等宽格子堆砌瀑布流效果 (一)
<!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...
- 深入理解JavaWeb技术内幕之中文编码
为什么要编码 1.计算机中存储信息的最小单元是1个字节,所能表示的字符范围为0~255个. 2.人类要表示的符号太多,无法用1个字节来完全表示. 常见的编码类型 ASCII码 总共128个,用1个字节 ...