изменить размер изображения
 

Как изменить размер отображаемой картинки пропорционально
Есть такой код но он не работает почему?

var img = $("#messages img")[0]; // Получаем IMG нашей картинки
var pic_real_width, pic_real_height;
$("<img/>") // Сделаем в памяти копию этой картинки, чтобы избежать проблем с CSS
    .attr("src", $(img).attr("src"))
    .load(function() {
        // Здесь копия нашей картинки загружена и можно получить её размеры
        pic_real_width = this.width;   // Учтите: $(this).width() не сработает
        pic_real_height = this.height; // потому что картинка находится в памяти.
		var img = $("#messages img");
		
		if (pic_real_width>pic_real_height || pic_real_width==pic_real_height){
		ratio=pic_real_width/pic_real_height
		
		img.attr({ width: 300 });
		img.attr({ height: 300/ratio });
		img.css('margin-left',-150);
		img.css('margin-top',-pic_real_height/2);
		
		}
		else{
		img.attr({ height: 300 });
		img.attr({ width: 300/ratio });
		img.css('margin-left',-pic_real_width/2);
		img.css('margin-top',-150);
		}
    });

Почемуто меняется только ширина а высота остается та же в случае когда ширина больше высоты
http://imedia.in.ua/main/page/catalog_add

Если задавать только одну сторону, и оставить незаданной другую - то картинка будет автоматически изменяться пропорционально.

потому что ratio нормально не вычисляется

... в современных браузерах

А в каких не будет?

danik.js,
по моему во всех ие вплоть до 11
для теста
http://learn.javascript.ru/play/ZGC7Y
версия с изменением высоты и ширины

http://learn.javascript.ru/play/VnfIT
обсуждалось здесь
Проблема с выводом изображений из массива

странно..

<img style="width: 300px;" src="http://ru.lookatcode.com/show/094733911100775/pict5.jpg" />

в ИЕ8 пропорционально уменьшилось (картинка шире 300пх)

Яростный Меч,
вы проверяли код для теста http://learn.javascript.ru/play/ZGC7Y

рони,

ага, точно.
по непонятным причинам отваливался дефолтный width:auto
вот, поправил (и упростил код)
http://learn.javascript.ru/play/Eq3GPb

а смысл ? ... ну пусть будет
если интересно, можно ещё на тему глюков с шириной в ие глянуть 1 пример monolithed, из http://javascript.ru/forum/misc/1507...html#post85224 в 8 он точно не сработает.

там надо уменьшить картинку, чтобы она вписалась в прямоугольник?

width: auto; height: auto;
max-width: 150px; max-height: 100px;

работает в IE7+

и тут тоже самое у ТС квадрат 300 на 300 можно решить используя css или js

Так работает

var img = $("#messages2 img")[0]; // Получаем IMG нашей картинки
var pic_real_width, pic_real_height;
$("<img/>") // Сделаем в памяти копию этой картинки, чтобы избежать проблем с CSS
    .attr("src", $(img).attr("src"))
    .load(function() {
        // Здесь копия нашей картинки загружена и можно получить её размеры
        pic_real_width = this.width;   // Учтите: $(this).width() не сработает
        pic_real_height = this.height; // потому что картинка находится в памяти.
			var img = $("#messages2 img");
		
		if (pic_real_width>pic_real_height ){
		var ratio=pic_real_width/pic_real_height;
		var width=70;
		var height=width/ratio;
		
		img.css("width",width);
		var ofset=70-height;
		img.css('left',0);
		img.css('top',70-(height+ofset/2));
		}
		else{
		var ratio=pic_real_width/pic_real_height;
		var height=70;
		var width=height*ratio;
		
		img.css("height",height);
		img.css("width",width);
		var ofset=70-width;
		img.css('left',70-(width+ofset/2));
		img.css('top',0);
		}
    });

danik.js,
You're so smart