How to set maximum height for $img but keep proportions

Question

How to set maximum height or width for:

$img_attributes= ' height=100 width=100 '. 'alt="'.$product['product_name'].'"';

Are you talking about PHP or HTML? In HTML you can set just the height and not mention the width. If your in PHP you need a function like AlbertEins — MindStalker, Dec 22 '09 at 18:37

score 17 · Answer 1 · edited Nov 22 '16 at 16:35

17

Well, there are the max-height and max-width CSS properties, aren't they? THey work in all major browsers except IE 6 and in IE 7.

edited Nov 22 '16 at 16:35

Jean-Philippe Murray

1,208
2
12
34

answered Dec 22 '09 at 18:34

Pekka

442,112
142
972
1,088

Hi Pekka, I haven't tested it yet, but can this work? $img_attributes= ' max-height=100 max-width=100 '. 'alt="'.$product['product_name'].'"'; – Chris Dec 22 '09 at 18:42
1

Nope, you need to add a `style`: `style='max-height: 100px; max-width: 100px' ` – Pekka Dec 22 '09 at 19:23
For this to work you must not set a width or height on the img tag itself. – Staysee Aug 28 '13 at 17:52
@Staysee you can, but it must be a relative size (like %) – Pekka Aug 28 '13 at 18:00
If I use max-height or max-width in css, it works. But if I use both on same object, both are ignored. – Viliam Jan 04 '14 at 11:01
Yeah, STUPID!!!!!! Why does everyone on SE have to have this snotty-ass attitude? – Christine Sep 17 '15 at 00:09

score 4 · Answer 2 · edited May 23 '17 at 12:17

You should check this answer for general information : Proportional image resize.

If you want to have an image resized without using server side I suggest you to user Javascript. Here is a tutorial.

In short you have a JavaScript function that will return the new Width and Height:

function scaleSize(maxW, maxH, currW, currH){
  var ratio = currH / currW;
  if(currW >= maxW){
        currW = maxW;
        currH = currW * ratio;
  } else >if(currH >= maxH){
        currH = maxH;
        currW = currH / ratio;
  }
  return [currW, currH];
}

With this function you can set the image width and height:

img.width = newW;
img.height = newH;

But, the best way would be to do it at server side. This will prevent to have a weird effect on client side.

score 2 · Answer 3 · answered Dec 22 '09 at 18:39

2

The following style will cause all images using the "MaxSized" css class to have a max height of 100px and a max width of 100px. If an image is smaller, it will not be stretched.

<style>
IMG.MaxSized
{
max-width: 100px;
max-height: 100px;
}
</style>

As mentioned by Pekka, you'll have to have a XHTML 1.0 Strict DTD in order for this to work in modern versions of IE, but I personally believe this is the appropriate approach.

answered Dec 22 '09 at 18:39

Brian Hasden

4,050
2
31
37

problem is if the image is bigger both in width and height, but not square. – Adriano Varoli Piazza Dec 22 '09 at 18:48
Will you get a sort of loop then? – Chris Dec 22 '09 at 19:08
1

That doesn't matter. If you want to limit the height or the width, you can with the max-height and max-width styles. If the image is larger vertically, it will be limited to the maximum height specified and scaled appropriate. Same goes for the width. The scale doesn't change. – Brian Hasden Dec 22 '09 at 19:09
I'm not sure what you mean by loop? I'm talking about CSS, not code. The CSS limits the displayed size of the image. It's determined on the client side, not server side and doesn't really have an execution path for it to loop. – Brian Hasden Dec 22 '09 at 19:11

Joris Meys · Answer 4 · 2017-04-10T08:20:38.980

As the top answer says, you can use max-height or max-width CSS properties. But these properties don't behave in the same way. To keep the ratio of the image, you have to set height and width to 100%, and then set max-width. If you set max-height the ratio is not preserved.

So:

<img src="image.png" style="height: 100%; width: 100%; max-width: 400px" alt=" "/>

does preserve the ratio, but

<img src="image.png" style="height: 100%; width: 100%; max-height: 400px" alt=" "/>

does not. This is because (as far as I understood) HTML will first set the width and then the height. So in the second case the width is set at 100% but the height is limited, which might result in distorting the image. In the first case, the width is set with a maximum limit, and the height is adjusted accordingly, hence preserving the image dimensions.

How to set maximum height for $img but keep proportions

4 Answers4