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

最新推荐文章于 2021-04-13 20:56:58 发布

原创最新推荐文章于 2021-04-13 20:56:58 发布 · 5.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#asp.net #url #border #string #class #阿里巴巴

.Net|C# 专栏收录该内容

66 篇文章

订阅专栏

本文介绍了一种使用ASP.NET实现图片按比例缩放显示的技术，并提供了前后端代码示例。此外，还讨论了让图片自适应浏览器窗口大小的几种方法，包括使用后台生成缩略图、CSS表达式及JavaScript等。

/*****
作者: 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 >