HTML5网页设计

图片效果

JS实现图片按比例等比缩小

时间:2011-06-24 01:41来源:未知作者:点击:
在调用图片列表的时候难免会碰到所设定尺寸与原始图片比例不相同,而导致图片压缩变形,这时就应该想办法让调用的图片可以按原比例等比缩小,空白处以固定色填充,这样图片缩小图看着才比较合理。

在调用图片列表的时候难免会碰到所设定尺寸与原始图片比例不相同,而导致图片压缩变形,这时就应该想办法让调用的图片可以按原比例等比缩小,空白处以固定色填充,这样图片缩小图看着才比较合理。下面这个方法是通过JS实现图片等比例缩小,效果是当图片超出预定大小就自动等比例缩小,此方法宽度和高度超出都会按比例缩小。当然还可以利用css中的expression来实现控制图片最大宽度,不太推荐expression这种方法^_^。

JS代码

<script language="JavaScript">
<!--
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= 200/200){
if(image.width>200){
ImgD.width=200;
ImgD.height=(image.height*200)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}

}
else{
if(image.height>200){
ImgD.height=200;
ImgD.width=(image.width*200)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}

}
}
}
//-->
</script>

html代码:

<img src="http://www.shejicool.com/psd.jpg" onload="javascript:DrawImage(this);" />

PS:在img标签代码中添加上面红色部分代码。JS中的宽度和高度自定义修改。


上一篇:上一篇:没有了 上一篇:下一篇:鼠标经过小图出现大图提示效果
阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐