none
Image控件没有自动适应图片大小吗 RRS feed

  • 问题

  • Image控件没有自动适应图片大小吗,就是说图片有多大,加载出来就是多大,
    我第一次加载了个图片,把宽设置成300,长400
    第二次加载一个非常小的图片时,长和宽没有变,还是300,400,导致图片被放大,很难看
    2009年8月26日 9:54

答案

  • 用JavaScript     
    window.onload = function() {
                document.getElementById("image1").style.height = document.getElementById("image1").offsetHeight >400?'400px' : document.getElementById("image1").offsetHeight+"px"  ;

            }


    试试
    • 已编辑 mldark 2009年8月27日 9:51
    • 已标记为答案 KeFang Chen 2009年8月28日 3:28
    2009年8月27日 9:49
  • <%@ Page Language="C#" AutoEventWireup="true"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
        protected void Img_Click(object sender, EventArgs e)
        {
            // 动态输出 img 的 HTML 代码就可以了
            String Id = ((Button)sender).ID;
            if (Id == "Img1") this.xImg.Text = "<img src='http://img1.cn.msn.com/image1/2009/8/27/63565.jpg' />";
            if (Id == "Img2") this.xImg.Text = "<img src='http://img1.cn.msn.com/image1/2009/8/27/63575.jpg' />";
            if (Id == "Img3") this.xImg.Text = "<img src='http://img2.cn.msn.com/image2/2009/8/27/63467.jpg' />";
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:Literal ID="xImg" runat="server"></asp:Literal>
            <asp:Button ID="Img1" runat="server"  Text="大图" onclick="Img_Click" />
            <asp:Button ID="Img2" runat="server"  Text="中图" onclick="Img_Click" />
            <asp:Button ID="Img3" runat="server"  Text="小图" onclick="Img_Click" />
        </form>
    </body>
    </html>
    

    知识改变命运,奋斗成就人生!
    2009年8月27日 9:55
    版主
  • 比如
    第一次加载一张图片,这张图片本身长800,宽600,但是我不想显示这么大,我在后台把Image对象的长设置成400,宽300,显示出来满足我的要求
    第二次我又拿这个Image对象加载了一张图片,这张图片本身长40,宽30,因为前面设置过,所以显示出来被放大了10倍,
    这时候我不想在后台设置它的大小,因为第三张图片本身长80,宽60,如果设置了,这张又不正常了。
    有没有什么方法把Image对象设置过的长宽清除掉,这样我只在加载第一张图片的时候设置长宽,加载第一张、第三张图片之前清除掉设置的长宽,所有要求就都满足了


    您好,个人的思路供参考,两种方法:
    1、在上传图片时,按要求在服务器上存好不同长宽的图片。只需要上传一次,剩下的代码处理。
    2、上传图片时,不做处理,显示的时候根据要求来临时处理图片,可动态输出。
    以上两个方法,都需要下面的代码做支持,然后根据实际情况修改一下即可。(下面的代码在vs2008上测试通过)
    只贴codebehind的代码,aspx上是一个上传控件和按钮。
            //对应的按钮事件
            protected void Button1_Click(object sender, EventArgs e)
            {
                Guid m_guid = Guid.NewGuid();
                this.FileUpload1.SaveAs("/Imgs/" + m_guid.ToString() + ".jpg");
                FileInfo m_FileInfo = new FileInfo("/Imgs/" + m_guid.ToString() + ".jpg");
                if (m_FileInfo.Exists)
                {
                    int m_Width = 40;
                    int m_Height = 30;
                    Bitmap m_Bitmap = new Bitmap("/Imgs/" + m_guid.ToString() + ".jpg");
                    Bitmap m_NewBitmap = CreateNewBitmap(m_Width, m_Height, m_Bitmap);
                    m_NewBitmap.Save("/Imgs/" + m_guid.ToString() + m_Width.ToString() + m_Height.ToString() + ".jpg");
                }
            }
           
            /// <summary>
            /// 根据已有的图片,按设定的宽高来创建新的图片
            /// </summary>
            /// <param name="width">新的宽度</param>
            /// <param name="height">新的高度</param>
            /// <param name="bitmap">已有的图片</param>
            /// <returns></returns>
            private Bitmap CreateNewBitmap(int width, int height, Bitmap bitmap)
            {
                Bitmap b = new Bitmap(width, height);
                Graphics g = Graphics.FromImage(b);
                g.InterpolationMode = InterpolationMode.HighQualityBicubic;
                g.DrawImage(bitmap, new Rectangle(0, 0, width, height), new Rectangle(0, 0, bitmap.Width, bitmap.Height), GraphicsUnit.Pixel);
                g.Dispose();
                return b;
            }

    这样在使用时,只需规定上传图片的规格即可!

    2009年8月27日 12:01
    版主
  • 你可以使用js判断.
    另外,第二次加载一个非常小的图片时,此时你可以将宽度和高度属性去掉啊
    或者此时设置为100%

    【孟子E章】
    2009年8月28日 1:37
    版主

全部回复

  • 可以啊,你不设置大小就可以了
    【孟子E章】
    2009年8月26日 9:55
    版主
  • 你好,不设置的话可以根据图片实现大小显示,应用中,一般都会设置一个宽或者一个高,这样才不会影响布局。
    jon.valett@gmail.com
    2009年8月26日 9:59
    版主
  • 最好还是指定图片大小,否则不同的浏览器可能有不同的布局,尤其是图片无法显示的时候
    Where there's a will there's a way
    2009年8月26日 11:35
  • 您好,除了程序上的设计,还应提供操作标准。
    例如:如果您在设计一组含义或概念相同的图片,例如产品图片。那么按需求设计好后,告知使用者上传图片时,应采用多少大小的图片。
    2009年8月26日 13:15
    版主
  • 第一次加载了个图片,把宽设置成300,长400
    第二次加载一个非常小的图片时,长和宽没有变,还是300,400,导致图片被放大,很难看
    2009年8月27日 1:38
  • 第一次加载了个图片,把宽设置成300,长400
    第二次加载一个非常小的图片时,长和宽没有变,还是300,400,导致图片被放大,很难看

    您好,明白您的意思,这个问题的解决方法,不仅是从程序代码的角度,还需从设计和使用的角度来考虑,保留我上面的意见。
    2009年8月27日 4:49
    版主
  • 您好,我明白你得意思,是说同一组图片用大小相同的格式
    但是我的Image预览不同组的图片,所以有大有小
    我希望它能自动调整大小
    2009年8月27日 4:56
  • 您好,我明白你得意思,是说同一组图片用大小相同的格式
    但是我的Image预览不同组的图片,所以有大有小
    我希望它能自动调整大小

    不设置大小就可以了
    2009年8月27日 4:59
  • 您好,我明白你得意思,是说同一组图片用大小相同的格式
    但是我的Image预览不同组的图片,所以有大有小
    我希望它能自动调整大小
    你好,Image控件可以在后台代码自由控制。至于怎么判断什么时候要大,什么时候要小,需要自己加逻辑判断。

    jon.valett@gmail.com
    2009年8月27日 6:38
    版主
  • 比如
    第一次加载一张图片,这张图片本身长800,宽600,但是我不想显示这么大,我在后台把Image对象的长设置成400,宽300,显示出来满足我的要求
    第二次我又拿这个Image对象加载了一张图片,这张图片本身长40,宽30,因为前面设置过,所以显示出来被放大了10倍,
    这时候我不想在后台设置它的大小,因为第三张图片本身长80,宽60,如果设置了,这张又不正常了。
    有没有什么方法把Image对象设置过的长宽清除掉,这样我只在加载第一张图片的时候设置长宽,加载第一张、第三张图片之前清除掉设置的长宽,所有要求就都满足了
    2009年8月27日 9:41
  • 用JavaScript     
    window.onload = function() {
                document.getElementById("image1").style.height = document.getElementById("image1").offsetHeight >400?'400px' : document.getElementById("image1").offsetHeight+"px"  ;

            }


    试试
    • 已编辑 mldark 2009年8月27日 9:51
    • 已标记为答案 KeFang Chen 2009年8月28日 3:28
    2009年8月27日 9:49
  • <%@ Page Language="C#" AutoEventWireup="true"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
        protected void Img_Click(object sender, EventArgs e)
        {
            // 动态输出 img 的 HTML 代码就可以了
            String Id = ((Button)sender).ID;
            if (Id == "Img1") this.xImg.Text = "<img src='http://img1.cn.msn.com/image1/2009/8/27/63565.jpg' />";
            if (Id == "Img2") this.xImg.Text = "<img src='http://img1.cn.msn.com/image1/2009/8/27/63575.jpg' />";
            if (Id == "Img3") this.xImg.Text = "<img src='http://img2.cn.msn.com/image2/2009/8/27/63467.jpg' />";
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:Literal ID="xImg" runat="server"></asp:Literal>
            <asp:Button ID="Img1" runat="server"  Text="大图" onclick="Img_Click" />
            <asp:Button ID="Img2" runat="server"  Text="中图" onclick="Img_Click" />
            <asp:Button ID="Img3" runat="server"  Text="小图" onclick="Img_Click" />
        </form>
    </body>
    </html>
    

    知识改变命运,奋斗成就人生!
    2009年8月27日 9:55
    版主
  • 另外只设置图片的宽或高能让图片按比率放大缩小
    知识改变命运,奋斗成就人生!
    2009年8月27日 10:04
    版主
  • 比如
    第一次加载一张图片,这张图片本身长800,宽600,但是我不想显示这么大,我在后台把Image对象的长设置成400,宽300,显示出来满足我的要求
    第二次我又拿这个Image对象加载了一张图片,这张图片本身长40,宽30,因为前面设置过,所以显示出来被放大了10倍,
    这时候我不想在后台设置它的大小,因为第三张图片本身长80,宽60,如果设置了,这张又不正常了。
    有没有什么方法把Image对象设置过的长宽清除掉,这样我只在加载第一张图片的时候设置长宽,加载第一张、第三张图片之前清除掉设置的长宽,所有要求就都满足了


    您好,个人的思路供参考,两种方法:
    1、在上传图片时,按要求在服务器上存好不同长宽的图片。只需要上传一次,剩下的代码处理。
    2、上传图片时,不做处理,显示的时候根据要求来临时处理图片,可动态输出。
    以上两个方法,都需要下面的代码做支持,然后根据实际情况修改一下即可。(下面的代码在vs2008上测试通过)
    只贴codebehind的代码,aspx上是一个上传控件和按钮。
            //对应的按钮事件
            protected void Button1_Click(object sender, EventArgs e)
            {
                Guid m_guid = Guid.NewGuid();
                this.FileUpload1.SaveAs("/Imgs/" + m_guid.ToString() + ".jpg");
                FileInfo m_FileInfo = new FileInfo("/Imgs/" + m_guid.ToString() + ".jpg");
                if (m_FileInfo.Exists)
                {
                    int m_Width = 40;
                    int m_Height = 30;
                    Bitmap m_Bitmap = new Bitmap("/Imgs/" + m_guid.ToString() + ".jpg");
                    Bitmap m_NewBitmap = CreateNewBitmap(m_Width, m_Height, m_Bitmap);
                    m_NewBitmap.Save("/Imgs/" + m_guid.ToString() + m_Width.ToString() + m_Height.ToString() + ".jpg");
                }
            }
           
            /// <summary>
            /// 根据已有的图片,按设定的宽高来创建新的图片
            /// </summary>
            /// <param name="width">新的宽度</param>
            /// <param name="height">新的高度</param>
            /// <param name="bitmap">已有的图片</param>
            /// <returns></returns>
            private Bitmap CreateNewBitmap(int width, int height, Bitmap bitmap)
            {
                Bitmap b = new Bitmap(width, height);
                Graphics g = Graphics.FromImage(b);
                g.InterpolationMode = InterpolationMode.HighQualityBicubic;
                g.DrawImage(bitmap, new Rectangle(0, 0, width, height), new Rectangle(0, 0, bitmap.Width, bitmap.Height), GraphicsUnit.Pixel);
                g.Dispose();
                return b;
            }

    这样在使用时,只需规定上传图片的规格即可!

    2009年8月27日 12:01
    版主
  • 你可以使用js判断.
    另外,第二次加载一个非常小的图片时,此时你可以将宽度和高度属性去掉啊
    或者此时设置为100%

    【孟子E章】
    2009年8月28日 1:37
    版主