Is there a way to specify a max height or width for an image?

Question

I'd like to have an image to have either a height of 725 or a width of 500 and maintain it's aspect ratio. When I have images with a height of over 725 and thinner than 500 they get stretched out to fit a width of 500.

What is the best way to do this?

Below is what I am doing now:

<asp:Image Height="725" width="500" ID="img_DocPreview" />

Update: Changed it to this but have the same problem. If I specify just the height it will maintain the aspect ratio but it exceeds the max width of 500px that i want.

<img style="height:725px;width:500px;" id="img_DocPreview" src="Images/empty.jpg" />

Answer 1

If you only specify either the height or the width, but not both, most browsers will honor the aspect ratio.

Because you are working with an ASP.NET server control, you may consider executing logic on the server side prior to rendering to decide which (height or width) attribute you want to specify; that is, if you want a fixed height under one condition or a fixed width under another.

Answer 2

editied to add support for ie6:

Try

<img style="height:725px;max-width:500px;width: expression(this.width > 500 ? 500: true);" id="img_DocPreview" src="Images/empty.jpg" />

This should set the height to 725px but prevent the width from exceeding 500px. The width expression works around ie6 and is ignored by other browsers.

Answer 3

Yes is there very simple way to do it with css.

img#myimg {
   max-width:50px;max-height:150px;
}

and image will always have same aspect ratio and be smaller than this box {50px,150px}. You don't need to specify both of them.

Answer 4

You could use some CSS and with the idea of kbrimington it should do the trick.

The CSS could be like this.

img {
  width:  75px;
  height: auto;
}

I got it from here: another post