Programmatically set height/width of image from database

Question

I'm having trouble consistently setting the width and height of an img tag. The img src is pulled dynamically from a database. The images being pulled from the database can have varying widths and heights so I need to set the img control. Sometimes the width and height are set properly and sometimes they aren't. I can't figure out why. Any help would be greatly appreciated. Thanks!

Here is what I'm doing now.

try
    {
        byte[] byteArray = GetImage();
        using (Bitmap bmp = ByteArrayToBitmap(byteArray))
        {
            //image is the img tag.
            image.Style["width"] = bmp.Width.ToString();
            image.Style["height"] = bmp.Height.ToString();
        }
    }
    catch (Exception ex)
    { }

EDIT: This appears to be a problem only in IE. Chrome and Firefox seem to be working fine. Also, when IE7 doesn't display the image with the proper height/width if the browser is refreshed it then displays properly. Sometimes...

Are the width and height values sometimes missing from the html? Or are then sometimes wrong? — Kevin Tighe
– Kevin Tighe, Commented Feb 7, 2009 at 16:21
Try putting some logging code in your catch block to see if you're getting an exception — Cal
– Cal, Commented Feb 7, 2009 at 16:23
Tighe-height and width values are set in the img tag properly but the image's height and width don't seem to actually be set to these values. Example, i have an image that is supposed to be wider than it is tall and this is in the html style="width:450;height:240;" but it's taller than it is long. — SquidScareMe
– SquidScareMe, Commented Feb 7, 2009 at 16:45
What's interesting about my previous comment is the last image loaded was taller than it was long... — SquidScareMe
– SquidScareMe, Commented Feb 7, 2009 at 16:46
Cal - Thanks for the suggestion. I've walked through the executing code many times and haven't hit the catch block yet but that might still be a good idea. Thanks. — SquidScareMe
– SquidScareMe, Commented Feb 7, 2009 at 16:47

Gary Green · Accepted Answer · 2009-02-07 17:54:35Z

2

This is because you need to remove the width and height attributes of the tag. Simply changing the CSS image width and height values will not work.

Try something like so, this is in Javascript;


imageTag.removeAttribute('width');
imageTag.removeAttribute('height');

answered Feb 7, 2009 at 17:54

Gary Green

22.4k6 gold badges52 silver badges76 bronze badges

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

2 Comments

SquidScareMe Over a year ago

Thanks for trying but it didn't work. I did as you said in codebehind in Page_PreInit().

Gary Green Over a year ago

Did you try doing it everytime a new image is loaded? Try debugging and work out exactly what the database is returning, and if there is any pattern to when it doesn't work.

Brandon · Accepted Answer · 2009-02-08 03:18:43Z

2

Looking at your code, I would suggest another approach; since you already have a copy of the image in your byte array, why not have your application resize the image and return a predictable size to the client? You would gain the benefit of not worrying about how different browsers resize and possibly reduce the quality of the image.

Example here... http://www.west-wind.com/Weblog/posts/283.aspx

answered Feb 8, 2009 at 3:18

Brandon

14.3k17 gold badges78 silver badges115 bronze badges

4 Comments

SquidScareMe Over a year ago

Good idea but the problem is the images have different height to width ratios. If I resize to a height and width I choose I run the risk of distorting the image. There is no universal size I can resize them to.

Brandon Over a year ago

That's fine though - what you can do is define a maximum width OR height, and then calculate the maximum size that you can make it until it meets the height or width requirement. Then just find the % between the original and your end #, and size the other dimension down. Want a code sample?

Ben Scheirman Over a year ago

+1 - It will save you bandwidth and produce better images at lower sizes than the original. The browser doesn't do any anisotropic filtering or any other technique to resize an image, so it will look crappy. It is trivial to create an HttpHandler that can resize an image & maintain aspect ratio.

Zhaph - Ben Duguid Over a year ago

IE7 can do anisotropic resizing if you tell it to: code.flickr.com/blog/2008/11/12/…

Collectives™ on Stack Overflow

Programmatically set height/width of image from database

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related