在网页中,如果一张图片大小超过图片容器页面元素大小,就会将页面撑得很难看。下面这段代码可以解决这个问题:
function
picresize
(
obj
,
MaxWidth
,
MaxHeight
){
obj . onload = null ;
img = new Image () ;
img . src = obj . src ;
if ( img . width > MaxWidth && img . height > MaxHeight ){
if ( img . width / img.height>MaxWidth / MaxHeight ) {
obj . height = MaxWidth * img . height / img.width;
obj.width=MaxWidth;
}else {
obj.width=MaxHeight*img.width /i mg . height ;
obj . height = MaxHeight ;
}
} else if ( img . width > MaxWidth ) {
obj . height = MaxWidth * img . height / img.width;
obj.width=MaxWidth;
}else if (img.height>MaxHeight) {
obj.width=MaxHeight*img.width /i mg . height ;
obj . height = MaxHeight ;
} else {
obj . width = img . width ;
obj . height = img . height ;
}
}
obj . onload = null ;
img = new Image () ;
img . src = obj . src ;
if ( img . width > MaxWidth && img . height > MaxHeight ){
if ( img . width / img.height>MaxWidth / MaxHeight ) {
obj . height = MaxWidth * img . height / img.width;
obj.width=MaxWidth;
}else {
obj.width=MaxHeight*img.width /i mg . height ;
obj . height = MaxHeight ;
}
} else if ( img . width > MaxWidth ) {
obj . height = MaxWidth * img . height / img.width;
obj.width=MaxWidth;
}else if (img.height>MaxHeight) {
obj.width=MaxHeight*img.width /i mg . height ;
obj . height = MaxHeight ;
} else {
obj . width = img . width ;
obj . height = img . height ;
}
}
用法举例:
<
img
src
=
"
http://php.4like.net/wp-content/themes/pg/images/logo.gif
"
onload
=
"
picsize(this, 100,50);
"
/>
程序分析:
1、如果图片的宽度和高度都比预设值大,并且图片的宽高比例比预设值的宽高比例大,就把图片的宽度置为预设值的宽度,高度置为 预设值宽度与图片高宽比例的乘积。
2、如果图片的宽度和高度都比预设值大,并且图片的宽高比例比预设值的宽高比例小或者相等,就把图片的高度置为预设值的高度,宽度置为 预设值高度与图片宽高比例的乘积。
3、如果图片的宽度大于预设值而高度小于等于预设值,就把图片的宽度置为预设值的宽度,高度置为 预设值宽度与图片高宽比例的乘积。
4、如果图片的高度大于预设值而宽度小于等于预设值,就把图片的高度置为预设值的高度,宽度置为 预设值高度与图片宽高比例的乘积。
5、如果图片的宽度和高度都比预设值小,就采用图片的原始大小。
6、经过上面的大小调整后,宽度和高度都比预设值小的图片,就采用图片的原始大小,其他大小均成比例缩放图片。