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'].'"';

Answer 1

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 you need to take note of this.

Answer 2

You should check this answer for general information : http://stackoverflow.com/questions/115462/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.

Answer 3

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.