您的位置：首页 > Web前端 > JavaScript

实用技巧：js图片等比缩放

2011-11-23 10:59 513 查看

经常看到一些网页，其中的图片比例失调，这里提供一组方法，供需要的朋友参考。基本构思如下：

1、在指定宽度和高度范围内等比例最大化缩放图片；

2、按指定宽度等比最大化缩放图片；

3、按指定高度等比最大化缩放图片。

原方法在pvo.js文件中，为了便于交流，在这里做了修改。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>等比缩放图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">

/**
*定义缩放的数据结构
*/
var scale={
width:null,
height:null
};

/**
*@see cn.hkm.web.Picture.java
*在指定宽度和高度范围内最大化缩放图片
*@param width 图片原始宽度
*@param height 图片原始高度
*@param outWidth 指定宽度范围
*@param outHeight 指定宽度范围
*/

var scaleWH=function(width,height,outWidth,outHeight){
width=parseInt(width);
height=parseInt(height);
outWidth=parseInt(outWidth);
outHeight=parseInt(outHeight);

var h=width;
var w=height;
var r=height/width;
var rs=outHeight/outWidth;
if((width<=outWidth)&&(height<=outHeight)){
w=width;
h=height;
}
if((width<=outWidth)&&(height>outHeight)){
w=parseInt(outHeight/r);
h=outHeight;
}
if((width>outWidth)&&(height<=outHeight)){
w=outWidth;
h=parseInt(outWidth*r);
}
if((width>outWidth)&&(height>outHeight)){
if(r<rs){
w=outWidth;
h=parseInt(outWidth*r);
}
if(r>rs){
h=outHeight;
w=parseInt(outHeight/r);
}
if(r==rs){
w=outWidth;
h=outHeight;
}
}
scale.width=w;
scale.height=h;
return scale;
}

/**
*@see cn.hkm.web.Picture.java
*在指定宽度范围内最大化缩放图片
*@param width 图片原始宽度
*@param height 图片原始高度
*@param outWidth 指定宽度范围
*/
var scaleW=function(width,height,outWidth){
width=parseInt(width);
height=parseInt(height);
outWidth=parseInt(outWidth);
if(width<outWidth){
scale.width=width;
scale.height=height;
}else{
scale.width=outWidth;
scale.height=parseInt(outWidth*height/width);
}
return scale;
}

/**
*@see cn.hkm.web.Picture.java
*在指定高度范围内最大化缩放图片
*@param width 图片原始宽度
*@param height 图片原始高度
*@param outWidth 指定宽度范围
*/
var scaleH=function(width,height,outHeight){
width=parseInt(width);
height=parseInt(height);
outHeight=parseInt(outHeight);
if(height<outHeight){
scale.width=width;
scale.height=height;
}else{
scale.width=parseInt(outHeight*width/height);
scale.height=outHeight;
}
return scale;
}

function see(){
scale=scaleWH(1366,768,600,600);
document.getElementById("byWH").innerHTML="<img src='images/img001.png' width='"+scale.width+"px' height='"+scale.height+"px' />";

scale=scaleW(1366,768,500);
document.getElementById("byW").innerHTML="<img src='images/img001.png' width='"+scale.width+"px' height='"+scale.height+"px' />";

scale=scaleH(1366,768,300);
document.getElementById("byH").innerHTML="<img src='images/img001.png' width='"+scale.width+"px' height='"+scale.height+"px' />";

}

</script>
</head>
<body onload="see()" >

<div id="byWH"></div>
<br/>
<div id="byW"></div>
<br/>
<div id="byH"></div>
</body>
</html>url:http://greatverve.cnblogs.com/archive/2011/11/23/js-zoom-pic.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航