高分，有关图片缩小算法带来的有关问题
日期：2014-05-16 浏览次数：20418 次
高分求助，有关图片缩小算法带来的问题
Javascript代码如下：
function DownImage(ImgD,MaxWidth,MaxHeight,alignX,alignY)
{
alignX=alignX||1;
alignY=alignY||1;
var image=new Image();
image.src=ImgD.src;
if(image.width> 0 && image.height> 0)
{
var rate = (MaxWidth/image.width < MaxHeight/image.height)?MaxWidth/image.width:MaxHeight/image.height;
var wid=0;
var hid=0;
if(rate <= 1)
{
wid=ImgD.width=image.width*rate;
hid=ImgD.height=image.height*rate;
}
else
{
wid=ImgD.width=image.width;
hid=ImgD.height=image.height;
}
if(alignX==1)
{
var ii=(MaxWidth-wid)/2;
ImgD.style.marginLeft=ImgD.style.marginRight=ii+ "px ";
}
if(alignY==1)
{
var ii=(MaxHeight-hid)/2;
ImgD.style.marginTop=ImgD.style.marginBottom=ii+ "px ";
}
}
}
画面代码：
<img src= "test.jpg " onload= "DownImage(this,500,375,-1,1) " />
为什么当画面Load的时候，现把图片按原来尺寸显示后，然后才缩小？
这样有时候出现问题:图片按照原来尺寸显示，不缩小了,需要刷新一下页面才显示出来？
有什么方法让图片怎么也超不过500*375这个尺寸？
让用户感觉好一些？
谢谢
------解决方案--------------------
<div style= "width:100px;height:100px; "> <img style= "wdith:100%; height:100%; overflow:hidden "> </div>
------解决方案--------------------
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> JK:支持民族工业,尽量少买X货 </title>
<script>
function setMaxHeight(imgObj,maxHeight){
if(imgObj.offsetHeight> maxHeight) {
imgObj.height=maxHeight;
imgObj.removeAttribute( 'width ');
}
}
</script>
</head>
<body>
<div style= "font-size:10pt; ">
注1：设定图片的最大宽度或高度，同时保证图片比例。 <br/>
<br/>
注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。 <br/>
注-----：JK： <a href= "mailTo:jk_10000@yahoo.com.cn?subject=About IMG "> JK_10000@yahoo.com.cn </a> <br/>
<hr/>
</div>
<IMG id= "big_img2 "
src= "20060925132517e9cb7.gif " width= "200 " onload= "setMaxHeight(th
Javascript代码如下：
function DownImage(ImgD,MaxWidth,MaxHeight,alignX,alignY)
{
alignX=alignX||1;
alignY=alignY||1;
var image=new Image();
image.src=ImgD.src;
if(image.width> 0 && image.height> 0)
{
var rate = (MaxWidth/image.width < MaxHeight/image.height)?MaxWidth/image.width:MaxHeight/image.height;
var wid=0;
var hid=0;
if(rate <= 1)
{
wid=ImgD.width=image.width*rate;
hid=ImgD.height=image.height*rate;
}
else
{
wid=ImgD.width=image.width;
hid=ImgD.height=image.height;
}
if(alignX==1)
{
var ii=(MaxWidth-wid)/2;
ImgD.style.marginLeft=ImgD.style.marginRight=ii+ "px ";
}
if(alignY==1)
{
var ii=(MaxHeight-hid)/2;
ImgD.style.marginTop=ImgD.style.marginBottom=ii+ "px ";
}
}
}
画面代码：
<img src= "test.jpg " onload= "DownImage(this,500,375,-1,1) " />
为什么当画面Load的时候，现把图片按原来尺寸显示后，然后才缩小？
这样有时候出现问题:图片按照原来尺寸显示，不缩小了,需要刷新一下页面才显示出来？
有什么方法让图片怎么也超不过500*375这个尺寸？
让用户感觉好一些？
谢谢
------解决方案--------------------
<div style= "width:100px;height:100px; "> <img style= "wdith:100%; height:100%; overflow:hidden "> </div>
------解决方案--------------------
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> JK:支持民族工业,尽量少买X货 </title>
<script>
function setMaxHeight(imgObj,maxHeight){
if(imgObj.offsetHeight> maxHeight) {
imgObj.height=maxHeight;
imgObj.removeAttribute( 'width ');
}
}
</script>
</head>
<body>
<div style= "font-size:10pt; ">
注1：设定图片的最大宽度或高度，同时保证图片比例。 <br/>
<br/>
注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。 <br/>
注-----：JK： <a href= "mailTo:jk_10000@yahoo.com.cn?subject=About IMG "> JK_10000@yahoo.com.cn </a> <br/>
<hr/>
</div>
<IMG id= "big_img2 "
src= "20060925132517e9cb7.gif " width= "200 " onload= "setMaxHeight(th
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
