четверг, 26 апреля 2012 г.

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

2 комментария:

omusatov комментирует...

Может быть вместо
$(window).load(function()

поставить
$(document).ready(function ()

Павел комментирует...

А вы в хроме проверьте))) Там ready наступает еще до того как картинки загрузились.

Отправить комментарий