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

What height/width on the surrounding div? Try doing it with just and tag also. — James Black, Sep 09 '10 at 16:13
There is no height/width specified on the surrounding div. I tried using img also and have the same problem. — Abe Miessler, Sep 09 '10 at 16:38

score 55 · Answer 1 · edited May 22 '23 at 08:50

55

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

edited May 22 '23 at 08:50

blackgreen

34,072
23
111
129

answered Dec 06 '16 at 14:40

Daniel Nyamasyo

2,152
1
24
23

Nico Burns · Accepted Answer · 2010-09-09T16:54:00.650

38

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.

edited Sep 09 '10 at 16:54

answered Sep 09 '10 at 16:39

Nico Burns

16,639
10
40
54

Could someone approve if this works? P.S. It wont work in IE6 for sure, because IE6 fails on max-height, max width. Never used it actually, so have forgot if IE7 and 8 isn't running into problems too. – tomsseisums Sep 09 '10 at 16:41
1

Updated code to use an expression (microsoft proprietary) to add ie6 support. – Nico Burns Sep 09 '10 at 16:55

score 7 · Answer 3 · answered Sep 09 '10 at 16:13

7

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.

answered Sep 09 '10 at 16:13

kbrimington

25,142
5
62
74

I actually looked at my code again and there was no reason for me to use the asp.net image control for this, it was actually making more work for me. Should I look at using Javascript to decide if I want my image to use a height or a width? – Abe Miessler Sep 09 '10 at 16:37
@Abe - "Should" is a strong word. You certainly could. Perhaps some JQuery masters could chime in with a solution. – kbrimington Sep 09 '10 at 16:49

score 3 · Answer 4 · answered Aug 30 '17 at 11:32

3

set a style for the image

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

answered Aug 30 '17 at 11:32

anandd360

298
3
14

asp:Image control has got no 'style' property. This will result in error. – Rahatur Sep 20 '17 at 05:13
should inline styles be camelCase ? – Anup Nov 21 '17 at 08:37
@Anup not clear what you exactly mean. anyway the code will work for maintaining the image display size – anandd360 Nov 26 '17 at 10:36
style="max-height:1000px; was just asking is there some convention to write dis in camelCase maxHeight:100px – Anup Nov 28 '17 at 08:55
@Anup sorry, not sure about that, you pls try it and check. – anandd360 Nov 30 '17 at 05:03

score 1 · Answer 5 · edited May 23 '17 at 12:02

1

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

edited May 23 '17 at 12:02

Community

1
1

answered Sep 09 '10 at 16:43

Icarin

427
5
7

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

5 Answers5

Linked