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" />
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.
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.
You can try this one
img{
max-height:500px;
max-width:500px;
height:auto;
width:auto;
}
This keeps the aspect ratio of the image and prevents either the two dimensions exceed 500px
You can check this post
set a style for the image
<asp:Image ID="Image1" runat="server" style="max-height:1000px;max-width:900px;height:auto;width:auto;" />
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
Source: Stackoverflow.com