web网页按比例显示图片实现原理及js代码

web网页按比例显示图片实现原理及网页按比例显示图片实现原理及js代码代码

由于上传图片的大小是未知的，在显示成缩略图的时候必须进行按比例的缩放才能美观地显示，本文将为大家

简单的介绍一种比较不错的方法，有此需求的朋友可以参考下

在动态站点上经常需要上传自己的图片，而这些图片的大小是未知的，在显示成缩略图的时候必须进行按比例的缩放才能美观

地显示。以最近做的golf网站（http://www.changligolfsales.com）做例子。

该网站需要上传高尔夫产品图片，并以缩略图显示在列表上，站点服务器支持Asp，但不支持aspjpeg之类的生成缩略图组

件，所以将上传的图片直接显示成缩略图，就需要按比例缩放了，前提是要获取图片的长宽，第一个想到的方法是在上传的时

候通过ADODB.STREAM对象读取图片的长宽信息保存在数据库并在页面生成的时候读取出来计算比例。这个方法明显的缺点

{

//显示框宽度W,高度H

var image = new Image();

image.src = imageDest.src;

if(image.width>0 && image.height>0)

{

//比较纵横比

if(image.width/image.height >= W/H)//相对显示框：宽>高

{

if(image.width > W) //宽度大于显示框宽度W，应压缩高度

imageDest.width = image.width;

imageDest.height = image.height;

}

}

else//同理

{

if(image.height > H)

{

imageDest.height = H;

imageDest.width = (image.width*H)/image.height;

}

}

}

以上函数对图片进行缩放。

golf网站的每张缩略图的id都设为imgProductItem，如：<img src="<%= imgPath %>" name="imgProductItem" width="150"

height="113" border="0" id="imgProductItem" />，里面的150x113就是显示框的最大尺寸，因为处理函数必须在onload完成时

运行，所以这里必须设置一定的大小，要不整个页面在载入图片过程中出现排版错乱，到运行了RsizeAllImageById才恢复正

常。

添加一个批量操作的函数：

复制代码 代码如下: