after upload image not have to stretch in my contnet box

Question

1.73/5 (4 votes)

See more:

i tried but not have any idea for this

my image box is 200px * 200px
==> i upload the image and its width is 100px and height is 200px but
when i load that image for review then that image wil be display as stretch in my
200px * 200px content.
pls give me the solution for this

image have to display as normal in my content box (imagebox)
no streching..
.

XML

<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 400px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <table class="style1">
            <tr>
                <td width="200">
                    <asp:FileUpload ID="FileUpload1" runat="server" />
                </td>
                <td rowspan="2" width="200">
                    <asp:Image ID="Image1" runat="server" Height="200px" Width="200px" />
                </td>
            </tr>
            <tr>
                <td width="200">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <asp:Button ID="btnupload" runat="server" onclick="btnupload_Click"
                        Text="Upload" />
                </td>
            </tr>
        </table>

    </div>
    </form>
</body>
</html>

********************************

C#

protected void btnupload_Click(object sender, EventArgs e)
    {
        int i = 1;

        if (FileUpload1.HasFile)
        {
            while (File.Exists(Server.MapPath("~/images/") + i.ToString() + ".jpg") == true)
            {
                i++;
            }
            FileUpload1.SaveAs(Server.MapPath("~/images/")+i.ToString()+".jpg");

            Image1.ImageUrl = "~/images/" + i.ToString() + ".jpg";
        }
    }

********************************

Posted 26-Jan-14 23:05pm

Manish Dalwadi

Updated 26-Jan-14 23:23pm

v2

Add a Solution

Comments

Kornfeld Eliyahu Peter 27-Jan-14 5:19am

Remove image box size definitions - auto...

3 solutions

Solution 1

One of the option is to Resize the Image to a fixed size and display it accordingly.

Refer

http://social.msdn.microsoft.com/Forums/vstudio/en-US/6c0bd27e-2a7c-48cb-826e-71c2a60706c1/how-to-save-image-in-a-fixed-size?forum=csharpgeneral[^]

http://dzone.com/snippets/c-resize-image-while[^]
Function to Resize Images on Upload[^]

Posted 26-Jan-14 23:59pm

JoCodes

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Manish Dalwadi · Accepted Answer · 2014-01-27T04:43:00

XML

<style type="text/css">
        .style1
        {
            width: 400px;
        }
        .img_style
        {
            height:200px;
            width:200px;
            border: 5px solid gray;

        }
    </style>

when u load image(profilie image and display) just change only in designing code using css

XML

<table class="style1">
            <tr>
                <td width="200">
                    <asp:FileUpload ID="FileUpload1" runat="server" />
                </td>
                <td rowspan="2" width="200">
                    <div class="img_style">
<div style="vertical-align:middle;">                        <center>
                            <asp:Image ID="Image1" runat="server" style="max-height:200px; max-width:200px; vertical-align:middle;" />
                        </center>
                    </div></div>
                </td>
            </tr>
            <tr>
                <td width="200">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <asp:Button ID="btnupload" runat="server" OnClick="btnupload_Click" Text="Upload" />
                </td>
            </tr>
        </table>

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-01-27T00:08:00

Don't mention Height and Width like this...

ASP.NET

<asp:Image ID="Image1" runat="server" Height="200px" Width="200px" />

Do this dynamically...

C#

protected void btnupload_Click(object sender, EventArgs e)
{
    int i = 1;

    if (FileUpload1.HasFile)
    {
        while (File.Exists(Server.MapPath("~/images/") + i.ToString() + ".jpg") == true)
        {
            i++;
        }

        FileUpload1.SaveAs(Server.MapPath("~/images/")+i.ToString()+".jpg");

        System.IO.Stream s = FileUpload1.PostedFile.InputStream;
        System.Drawing.Image img = System.Drawing.Image.FromStream(s);

        int intFileWidth = 0;
        int intFileHeight = 0;

        int.TryParse(img.PhysicalDimension.Width.ToString(), out intFileWidth);
        int.TryParse(img.PhysicalDimension.Height.ToString(), out intFileHeight);

        Image1.Height = intFileHeight;
        Image1.Width = intFileWidth;

        Image1.ImageUrl = "~/images/" + i.ToString() + ".jpg";
    }
}

after upload image not have to stretch in my contnet box

3 solutions

Solution 3

Solution 2

Solution 1

Add your solution here

Preview 0