Масштабирование картинок (пропорционально) средствами JavaScript

В общем ситуация такая - есть всякие разные картинки, и вам их нужно вписать в блоки

фиксированного размера. Как быть? Если задать ширину и высоту в тегах <img>, то пропорцию не сохраним, если прописать только ширину или только высоту, то если ширина больше высоты или наоборот, то картинка может вылезти за пределы блока, выход может и быдлокодинговый, но работает.

function auto_size (img,max_width,max_height)

{

if (img.width>maxwidth) 

{

width = img.width; height = img.height;

img.width = maxwidth;

img.height = (maxwidth*height)/width;

}

if (img.height>maxheight) 

{

width = img.width; height = img.height;

img.height = maxheight;

img.width = (maxheight*width)/height;

}

}

У тега img пишем <img onload="javascript:autosize(this,250,500)" src="...." >

Где 250 это максимальная ширина картинки, а 500 - максимальная высота, если картинка вылезет по какой то из сторон за пределы блока, то она пропорционально уменьшится.

Что делать, если лень писать onload для каждой картинки?

На помощь приходит Jquery и вот такая функция

$(window).load(function() {

$('.class img').each(function(){

 auto_size ($(this)[0],195,200);

});

});

Для всех картинок, вложенных в класс будет применена эта функция

P.S. Нужно еще придумать механизм, при котором эти картинки сперва будут невидимыми, а потом масштабироваться и отображаться, т.к. картинки отображаются до того как страница загрузится и отображаются не совсем красиво.