牛掰的图片等比缩放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" ...
随机推荐
- sql必知必会(第四版) 学习笔记二 视图
本书用到的几个表的建表sql语句如下: --销售产品供应商 CREATE TABLE Vendors ( vend_id varchar(20) not null, vend_name varchar ...
- (转)Java字符串应用之密码加密与验证
1.通过java.Security.MessageDigest的静态方法getInstance创建具有指定算法名称的信息摘要,参数为算法名,传入”MD5“则表示使用MD5算法 2.Message ...
- mapkit定位以及俯视视图
1.导入框架MapKit.framework,CoreGraphics.framework
- Direct2D 几何计算和几何变幻
D2D不仅可以绘制,还可以对多个几何图形对象进行空间运算.这功能应该在GIS界比较吃香. 这些计算包括: 合并几何对象,可以设置求交还是求并,CombineWithGeometry 边界,加宽边界,查 ...
- Thinking in Java——集合(Collection)
一.ArrayList的使用(略) 二.容器的基本概念 (一).Collection是集合类的基本接口 主要方法: public interface Collection<E>{ bool ...
- Sublime Text 3 个人配置文件
{ "dpi_scale": 1.0, "draw_white_space": "selection", "fallback_en ...
- 《how to design programs》9.3处理任意长度的表
假定一个玩具商店要把货物库存清单存放在计算机之中,这样,店里的员工就可以快速判断商店里是否还有某种玩具存货.简言之,商店需要一个能够检查库存是否含有玩具'doll 的函数contains-doll?, ...
- 弹出框、遮罩层demo
仿alert.confirm的弹出框. 弹出后,用遮罩层将背景虚化. 代码如下: <html> <meta http-equiv="Content-Type" c ...
- C语言的本质(15)——C语言的函数接口入门
C语言的本质(15)--C语言的函数接口 函数的调用者和其实现者之间存在一个协议,在调用函数之前,调用者要为实现者提供某些条件,在函数返回时,实现者完成调用者需要的功能. 函数接口通过函数名,参数和返 ...
- 在MFC下实现图像放大镜
当我们想仔细观察某个细微的东西时,一般都会使用放大镜.而要看清显示在计算机屏幕上的图片或文字时通常也可以借助于Windows操作系统附带的放大程序来实现.但该程序只能以固定的放大倍数去进行观看,有时并 ...