/*****
作者: william Lin
功能: 让图片按比例进行缩放显示
技术: Asp.net
*******/
算法分析:
设加载的图片为:宽=Weight 高= height
那么比例就为 K = Weight/height
=================== 为达到最大高宽为 90
所以算法如下所示
核心只要按照比例K,计算出最终的宽和高就可以了
--------前台 showPicture.aspx
<img class="picline"
height='<%# GetHeight(DataBinder.Eval(Container.DataItem, "pic1").ToString())%>'
width='<%# GetWidth(DataBinder.Eval(Container.DataItem, "pic1").ToString())%>'
src="<%# Deal_Pic(DataBinder.Eval(Container.DataItem,"pic1").ToString()) %>" border="0">
--------后台 showPicture.cs
using System.Drawing;
#region 将图片按大小比例显示,处理 //william add function 2007-10-09
/// <summary>
/// 宽度
/// </summary>
public int GetWidth(string url)
{
try
{
if(url == "*****" || url.Length < 10)
{
url = "/images/nopic.gif";
}
url = url.Substring(1,url.Length-1);
string urrl = Server.MapPath(url);
double k;
double width=0;
double height=0;
// 注意这里的 urrl 一定要物理路径,不然会抱错。
System.Drawing.Bitmap imgObj = new Bitmap(urrl);
if ((imgObj.Width != 0) && (imgObj.Height != 0))
{
width=imgObj.Width;
height=imgObj.Height;
k=Convert.ToDouble( width/height);
if(k>=1)
{
if (width>=height)
{
width=90;
height=width/k;
}
}
else
{
if (height>=width)
{
height=90;
width=k*height;
}
}
}
int wid = Convert.ToInt32(width);
return wid;
}
catch
{
return 90;
}
}
/// <summary>
/// 高度
/// </summary>
public int GetHeight(string url)
{
try
{
if(url == "*****" || url.Length < 10)
{
url = "/images/nopic.gif";
}
url = url.Substring(1,url.Length-1);
string urrl = Server.MapPath(url);
double k;
double width=0;
double height=0;
System.Drawing.Bitmap imgObj = new Bitmap(urrl);
if ((imgObj.Width != 0) && (imgObj.Height != 0))
{
width=imgObj.Width;
height=imgObj.Height;
k=Convert.ToDouble( width/height);
if(k>=1)
{
if (width>=height)
{
width=90;
height=width/k;
}
}
else
{
if (height>=width)
{
height=90;
width=k*height;
}
}
}
int hid = Convert.ToInt32(height);
return hid;
}
catch
{
return 90;
}
}
#endregion ======================end
/***************************/
前台代码可以加入一个表格的细边框,做到像阿里巴巴显示产品的那种效果.
<table width="100" height="100" border="1" cellspacing="0" cellpadding="0" bordercolordark="#ffffff" bordercolorlight="#000000">
<tr>
<th>
<A href="minishop/shop.aspx?id=<%# DataBinder.Eval(Container.DataItem,"supplier_id") %>&pid=<%# DataBinder.Eval(Container.DataItem,"post_id") %>">
<img class="picline"
height='<%# GetHeight(DataBinder.Eval(Container.DataItem, "pic1").ToString())%>'
width='<%# GetWidth(DataBinder.Eval(Container.DataItem, "pic1").ToString())%>'
src="<%# Deal_Pic(DataBinder.Eval(Container.DataItem,"pic1").ToString()) %>" border="0"></a></th>
</tr>
</table>
============================ 补充
让图片自适应大小的方法
1. 用后台程序自动生成缩略图
2. 用css调用expression控制图片溢出后的大小;
(http://www.blog.edu.cn/user1/7987/archives/2006/1440861.shtml )
3. 用js写函数控制图片溢出后的大小;
其中后两种都是javascript在起作用,但是工作原理不同,css中调用expression可以解决这个问题,但是解决得不好,因为如果页面中图片一多,expression中的语句会不断被调用,非常耗费客户端内存,容易导致浏览器假死;而直接用javascript,在页面onload的时候就可以轻松解决这个问题,而且只调用一次,比起expression真是好得太多,程序很简单,下面是个简单的例子,我假设这个页面图片宽度不能超过200px,而实际图片宽度是550px:





var imageArr=document.getElementById(controlID);
var imageRate = imageArr.offsetWidth / imageArr.offsetHeight;
if(imageArr.offsetWidth > maxWidth)
{
imageArr.style.width=maxWidth + "px";
imageArr.style.Height=maxWidth / imageRate + "px";
}
if(imageArr.offsetHeight > maxHeight)
{
imageArr.style.width = maxHeight * imageRate + "px";
imageArr.style.Height = maxHeight + "px";
}


