Formating Image in asp.net webpage

I am trying to create a fairly simple web page to display an image and some text.

Here is the html code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="literal2">
    
        <asp:Literal ID="Literal2" runat="server"></asp:Literal>
    
    </div>
    <div id="imagediv1">
        <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/B1AMUFLOW.JPG"  Class="images"/>
    </div>
    <div id="literal3">
        <asp:Literal ID="Literal3" runat="server"></asp:Literal>
    </div>
    
    </div>
    </form>
</body>
</html>

Open in new window


I was having a problem when large size image was inserted in the page (1536 x 2048) the image would run off the page. I fixed this by using css formating as follows:

.images
{
      
      padding-top:15px;
      padding-bottom:15px;
      padding-left:20%;
      padding-right:20%;
      width:60%;
      font-size:12px;
      font-family:@Arial Unicode MS;
      
      
}

I liked how this scalled the large image down to fit nicely on the page. But then I noticed it stretched out smaller images to fit 60% of the width and I did not like that.

Can anyone share with me a way to format images so that large images are fit into the page but smaller images are not scaled up?

I am using vb.net in visual studio 2008.

Thank you

John
GIANTOCRAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hafeezmcaCommented:
Hi,

Well the easiest solution for you is to just include the width in pixels but dont enter the height in the image tag.

<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/B1AMUFLOW.JPG"  width="200px" />

The height will be calculate automatically for the image.

Else you can follow this article which explains how to handle images while displaying and retain the pixels.

http://aspdotnetmatters.blogspot.com/2010/10/image-handling-in-aspnet.html

The code is in C# which can be translated from here:

http://converter.telerik.com/

Wish u all the best.
GIANTOCRAuthor Commented:
Thanks. I should have been clearer. I would like this web page to be able to accept different size pictures. For example in my collection of sample pictures I have pictures ranging in size from 244px X 321px to 1536 x 2048.

I am trying to create a website that keeps very big pictures from over flowing the page and allows smaller pictures to retain their original size.
CodeCruiserCommented:

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GIANTOCRAuthor Commented:
Thanks. That is a nice clean solution.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Visual Basic.NET

From novice to tech pro — start learning today.