CODEWITHSUNDEEP
htmlcss
Abe Miessler
Abe Miessler

Reputation: 85046

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

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" />

Upvotes: 56

Views: 164552

Answers (5)

Daniel Nyamasyo
Daniel Nyamasyo

Reputation: 2312

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

Upvotes: 59

anandd360
anandd360

Reputation: 306

set a style for the image

<asp:Image ID="Image1" runat="server" style="max-height:1000px;max-width:900px;height:auto;width:auto;" />

Upvotes: 3

Nico Burns
Nico Burns

Reputation: 17099

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.

Upvotes: 40

Icarin
Icarin

Reputation: 427

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

Upvotes: 1

kbrimington
kbrimington

Reputation: 25642

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.

Upvotes: 7

Related Questions