resize изображения и аналог getimagesize()
 

Хочу реализовать для js-галереи (http://learn.javascript.ru/play/tuto...ery/index.html) красивое отображение вертикальных и горизонтальных картинок в паспарту одного размера. На ПХП делал так: getimagesiz'ом сравнивал width и height и по результату присваивал картинке один из двух стилей.

Нашел аналог getimagesize для js: http://www.rsdn.ru/forum/web/987244.1
Подставляю эту функцию и пытаюсь присвоить ширину и высоту

function showThumbnail(href, title) {
  var is = getImageSize( 'largeImg');
  largeImg.src = href;
  largeImg.alt = title;
  if (is.width > is.height) largeImg.width = is.width;
  else largeImg.height = is.height;
}

Должно по идее присваивать или ширину или высоту изначальной картинки. Вроде присвоение работает но ужасно. Изображения растягиваются, а иногда при повторном нажатии на один и тот же thumbnail картинка растягивается по вертикали.

function showThumbnail(href, title) {
  var is = getImageSize( 'largeImg');
  largeImg.src = href;
  largeImg.alt = title;
  if (is.width > is.height) largeImg.width = is.width;
/* else largeImg.height = is.height;*/
}

В таком виде ширина у всех картинок одинакова, ничего не растягивается, но вертикальные картинки выходят за паспарту.

function showThumbnail(href, title) {
  var is = getImageSize( 'largeImg');
  largeImg.src = href;
  largeImg.alt = title;
  if (is.width < is.height) largeImg.height = is.height;
/* else largeImg.height = is.height;*/
}

Если так - то же самое, что и в первом варианте.

Т.е. выходит, что ширина нормально присваивается, а высота нет.
Я новичок, так что простите за банальные вопросы. Может все вообще не этим путем надо решать?

не проще банально задавать атрибутом в картинке ?

<img src="http://s2.uploads.ru/H43vD.jpg" width="200" />

или через стиль

<style>
 #Wrap-block img{
 width:200px;
 height:auto;
 max-height:350px!important;
}
</style>

у меня картинки в квадратном паспарту отображаются. в этом случае нельзя присвоить стандартную высоту или ширину, т.к. если картинка вертикальная, то с фиксированной шириной будет вылазить за пределы поля.
Так делал на ПХП:

<img class="
<?php 	if($size[0] > $size[1])
		{
			echo 'goriz';
		}
		else echo 'vert';
?>

.goriz{
	display: block;
	margin: 25px auto;
	width: 500px;
}

.vert{
	display:block;
	margin: 10px auto;
	height: 500px;
}

см точный вид стиля - там ограничение по высоте!

<style>
 #Wrap-block img{
 width:200px;
 height:auto;
 max-height:350px!important;
}
</style>


<div id=Wrap-block>
<img src="http://s2.uploads.ru/H43vD.jpg" />
<img src="http://images2.layoutsparks.com/1/95613/water-dragon-animal-image.jpg" />
<img src="http://media.professionali.ru/processor/commentimages/original/2011/12/31/500.jpg" />
<img src="http://s3.uploads.ru/2yB5d.jpg" />
</div>

по-ходу нужно искать картинки с пропорциями длинных и узких (height/width > X) и им принудительно выставлять атрибут width
(Хотя вродь делал через стиль(может вру

max-height не спасает

<style>.galcont{	/*паспарту для картин*/
	height: 550px;
	width: 550px;
	background-color: #E7E6E9;
	border: 1px solid grey;
	margin: auto;
}
#largeImg {
	width: 500px;
/*	height: 400px;*/
	display: block;
	margin: auto;
}
</style>

<div class="galcont">
<p><img id="largeImg" src="http://media.professionali.ru/processor/commentimages/original/2011/12/31/500.jpg" alt="Large image"></p>
</div>

Хотел сделать просмотр, но пока не разобрался как.

Так вот, max-height не спасает, потому что при вертикальном img нужно ограничить по высоте - тогда будет маленький width. Горизонталь - наоборот: width на максимум, а height маленький.

Ну этого не избежать по любому, если размеры паспарту идентичные, но при центрировании будет выглядеть терпимо,
правдо центрирование по высоте мон выполнить только при паспарту таблицей

Пытался тут илюстрацию загрузить, но лажа получается. Короче, вопрос свелся вот к этому:

if (is.width > is.height) largeImg.width = '500';
	else largeImg.height = '500';

Где is.width и is.height - результаты выполнения функции getImageSize.

В этом месте что-то не работает. Хотя работает, но присваивает какую-то лабуду.

http://www.bulgakova.in.ua/gallery/index/all
Вот илюстрация если чем-то поможет.

....
нтмл учите.
http://htmlbook.ru/html/img/height
http://htmlbook.ru/html/img/width
-не нужно высоту или ширину предварительно задавать у тега вообще.
а здесь собственно вопрос-сравнение размеров заданных в теге img . А может всётаки сравнивать размеры нужно приходящего изображения ,после его полного получения ?:) скрипт -на помойку


-так же обратите внимание на единицы измерения