Как установить максимальную высоту за $img, но сохранить пропорции

Вам следует проверить этот ответ на предмет общей информации : Пропорциональный размер изображения.

Если вы хотите, чтобы изображение было изменено без использования серверной стороны, я предлагаю вам использовать Javascript. Вот учебное пособие.

Короче говоря, у вас есть функция JavaScript, которая вернет новую Ширину и Высоту:

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];
}

С помощью этой функции вы можете установить ширину и высоту изображения:

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

Но лучшим способом будет сделать это на стороне сервера. Это предотвратит странный эффект на стороне клиента.

Следующий стиль приведет к тому, что все изображения, использующие класс "MaxSize" css, будут иметь максимальную высоту 100px и максимальную ширину 100px. Если изображение меньше, то оно не будет растягиваться.

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

Как упоминал Пекка, для того, чтобы это работало в современных версиях IE, необходимо иметь XHTML 1.0 Strict DTD, но я лично считаю, что это подходящий подход.

Ну, есть максимальная высота и максимальная ширина CSS свойства, не так ли? Это работает во всех основных браузерах, кроме IE 6 и IE 7.