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...

Answer 1

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');

Answer 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