Solved

Formating Image in asp.net webpage

Posted on 2012-04-12
4
161 Views
Last Modified: 2012-04-14
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
0
Comment
Question by:GIANTOCR
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 5

Expert Comment

by:hafeezmca
ID: 37840110
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.
0
 

Author Comment

by:GIANTOCR
ID: 37840664
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.
0
 
LVL 83

Accepted Solution

by:
CodeCruiser earned 500 total points
ID: 37842110
0
 

Author Closing Comment

by:GIANTOCR
ID: 37846081
Thanks. That is a nice clean solution.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
Creating an analog clock UserControl seems fairly straight forward.  It is, after all, essentially just a circle with several lines in it!  Two common approaches for rendering an analog clock typically involve either manually calculating points with…
Michael from AdRem Software explains how to view the most utilized and worst performing nodes in your network, by accessing the Top Charts view in NetCrunch network monitor (https://www.adremsoft.com/). Top Charts is a view in which you can set seve…
Visualize your data even better in Access queries. Given a date and a value, this lesson shows how to compare that value with the previous value, calculate the difference, and display a circle if the value is the same, an up triangle if it increased…

622 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question