CODEWITHSUNDEEP
asp.netimage-resizing
Rauf
Rauf

Reputation: 12842

Images in web pages asp.net c#

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 ?

Upvotes: 0

Views: 249

Answers (2)

IrishChieftain
IrishChieftain

Reputation: 15253

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.

Upvotes: 0

vvohra87
vvohra87

Reputation: 5664

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!

Upvotes: 1

Related Questions