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

/*****
作者: 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 >
< img  id = " achome "  src = " http://image2.sina.com.cn/ent/y/2006-10-09/U1819P28T3D1276435F326DT20061009152013.jpg "   />
</ body >

< script >
    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";
    }

</ script >

 

 

 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值