How to keep aspect ratio of image inside an ImageButton control?

[Arthur Hsu]

Hello,

I have an ImageButton that refers to an external image. How can I keep that
image's aspect ratio when I set the ImageButton's size to 120x120?

TIA,

Arthur

 

[Alex]

You could try something like this...

/// <summary>
/// Crop the image if it is too big.
/// </summary>
/// <param name="bmp"></param>
/// <returns></returns>
protected System.Drawing.Bitmap Crop( System.Drawing.Bitmap bmp ){

System.Drawing.Image imgPhoto = (System.Drawing.Image)bmp;
int Width = 100;
int Height = 100;
int sourceWidth = imgPhoto.Width;
int sourceHeight = imgPhoto.Height;
int sourceX = 0;
int sourceY = 0;
int destX = 0;
int destY = 0;

float nPercent = 0;
float nPercentW = 0;
float nPercentH = 0;

nPercentW = ((float)Width/(float)sourceWidth);
nPercentH = ((float)Height/(float)sourceHeight);

if(nPercentH < nPercentW) {
nPercent = nPercentW;
destY = (int)((Height - (sourceHeight * nPercent))/2);
}
else {
nPercent = nPercentH;
destX = (int)((Width - (sourceWidth * nPercent))/2);
}

int destWidth = (int)(sourceWidth * nPercent);
int destHeight = (int)(sourceHeight * nPercent);

Bitmap bmPhoto = new Bitmap(Width,
Height, System.Drawing.Imaging.PixelFormat.Format24bppRgb);
bmPhoto.SetResolution(imgPhoto.HorizontalResolution,
imgPhoto.VerticalResolution);

Graphics grPhoto = Graphics.FromImage(bmPhoto);
grPhoto.Clear(System.Drawing.Color.White);
grPhoto.InterpolationMode =
System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;

grPhoto.DrawImage(imgPhoto,
new Rectangle(destX,destY,destWidth,destHeight),
new Rectangle(sourceX,sourceY,sourceWidth,sourceHeight),
GraphicsUnit.Pixel);

grPhoto.Dispose();

// delete the previous user's avatar, both *.jpg and *.gif
if( File.Exists( Page.Server.MapPath(Page.Request.ApplicationPath) +
"UserIcons\\" + EditUser.Username + ".jpg") ){
System.IO.File.Delete( Page.Server.MapPath(Page.Request.ApplicationPath)
+ "UserIcons\\" + EditUser.Username + ".jpg" );
}
if( File.Exists( Page.Server.MapPath(Page.Request.ApplicationPath) +
"UserIcons\\" + EditUser.Username + ".gif") ){
System.IO.File.Delete( Page.Server.MapPath(Page.Request.ApplicationPath)
+ "UserIcons\\" + EditUser.Username + ".gif" );
}
return bmPhoto;
}

 

[Steven Cheng[MSFT]]

Hi Arthur,

Thanks for your posting. If the external image is in your own
application(site) or is dynamically generatecd by your self , you can use
GDI+ to adjust the image. As Alex has provided some code snippet on this.
And I think you can also consider using a custom HTTPHandler which return
the image resource dynamically , here is a good tech article discussing on
this:

#Using ASP.NET HTTP Handlers to create a photo album
http://www.microsoft.com/belux/nl/msdn/community/columns/desmet/httphandler.
mspx

Otherwise, if the image is on a external remote site which can't be
controled by ourselve , we can't do anything on the image since the image
is acutally loaded by the client user's browser when parsing the page( the
<input type=image...> html element output by the asp.net imagebutton
control).

Please feel free to post here if there is anything unclear. Thanks.

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

 

[Matt Berther]

Hello Steven Cheng[MSFT],

Hrmm... Setting either the height or the width, but not both works for me.
If you want to maintain the aspect ratio, you need to determine which one
is your starting point. Hence, you can not set both of them and expect your
aspect ratio to be maintained.

<img src="my400x200Image.gif" height="100"> will render the my400x200Image.gif
with a height of 100 and a width of 50 (100/400 = .25 and .25 * 200 = 50).

Going this route saves a bunch of unnecessary code... Let the browser do
the work... :=)

 

[Arthur Hsu]

Thanks to Alex and Steven. My images are on a remote site Maybe I
should think of something else ...

-Arthur

 

[Steven Cheng[MSFT]]

You're welcome Arthur,

Always feel free to post here. Thanks.

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)