Solved

Formating Image in asp.net webpage

Posted on 2012-04-12
4
154 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
  • 2
4 Comments
 
LVL 5

Expert Comment

by:hafeezmca
Comment Utility
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
Comment Utility
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
Comment Utility
0
 

Author Closing Comment

by:GIANTOCR
Comment Utility
Thanks. That is a nice clean solution.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
If you need to start windows update installation remotely or as a scheduled task you will find this very helpful.
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now