您的位置：首页 > 编程语言 > ASP

Asp.net 让图片按比例进行缩放显示

2007-10-11 13:19 513 查看

/*****

作者: 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：

<body>

</body>

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航