Images in web pages asp.net c#

Question

Aim: To resize the images based on the resolution

Problem : If we do not resize, the alignment and image structuring will be gone

Need of the following code : I don't want to resize a small images to 100% width.

    System.Drawing.Image img = System.Drawing.Image.FromFile(imgTest.Src);
    if (img.HorizontalResolution > 1000)
    {
        imgTest.Attributes.Add("width", "100%");
    }

Am I in the right way ? Or is there any other alternatives to do the same ? Let me know, can I replace the C# code using any CSS ?

vvohra87 · Accepted Answer · 2011-08-11 12:47:38Z

1

Can you be more specific?

Basically are you storing the image somewhere in the new size?

Or do you simply wish to show the image inside a DIV or td which needs to be of a certain width / height?

And if I understand you right, you are just looking to resize larger images, so anything below a threshold should not get resized, right?

If it is simple for display, you can ditch all of this and just use CSS

img
{
   max-width:1000px;
   max-height:1000px;
}

This will make any image that exceeds either of these constraints smaller but with fixed aspect ratio.

This link explains the basics of these CSS properties http://www.w3schools.com/cssref/pr_dim_max-height.asp

Let me know if this was helpful! Cheers!

answered Aug 11, 2011 at 12:47

vvohra87

5,7044 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

IrishChieftain · Accepted Answer · 2011-08-11 14:39:57Z

You could use CSS media queries to do this. CAVEAT: there is a current trend among Web Designers to use so-called "Responsive Web Design" techniques to achieve this for mobile devices; my advice: don't follow this fad. Media queries only kick in after all markup and images have downloaded. So if you wanted to apply smaller images for mobile devices, all the desktop versions would still be downloaded causing a significant performance problem.

If you are trying to do this for mobile devices, create separate site for mobile and apply the CSS media queries to that. Use Mobi to detect browser features.

If it's just a regular desktop browser site, CSS Media Queries are the way to go.

http://www.w3.org/TR/css3-mediaqueries/

The advantage of using this method over setting max width and height is that you preserve the quality of the image. You do this by having smaller versions available for the media query.

Collectives™ on Stack Overflow

Images in web pages asp.net c#

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related