В общем ситуация такая - есть всякие разные картинки, и вам их нужно вписать в блоки
фиксированного размера. Как быть? Если задать ширину и высоту в тегах <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. Нужно еще придумать механизм, при котором эти картинки сперва будут невидимыми, а потом масштабироваться и отображаться, т.к. картинки отображаются до того как страница загрузится и отображаются не совсем красиво.