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

[Vdomah]

Хочу реализовать для 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;*/
}

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

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

[Deff]

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

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

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

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

[Vdomah]

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

<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;
}

[Deff]

то с фиксированной шириной будет вылазить за пределы поля.

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

<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
(Хотя вродь делал через стиль(может вру

[Vdomah]

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 маленький.

[Deff]

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

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

[Deff]

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

[HTML run]Тут HTML[/HTML]

[Vdomah]

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

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

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

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

[Vdomah]

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

[dmitriymar]

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

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

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

....

#largeImg {
09 width: 500px;
10 /* height: 400px;*/
11 display: block;
12 margin: auto;

нтмл учите.
http://htmlbook.ru/html/img/height
http://htmlbook.ru/html/img/width
-не нужно высоту или ширину предварительно задавать у тега вообще.

1 function showThumbnail(href, title) {
2 var is = getImageSize( 'largeImg');
3 largeImg.src = href;
4 largeImg.alt = title;
5 if (is.width > is.height) largeImg.width = is.width;
6 else largeImg.height = is.he

а здесь собственно вопрос-сравнение размеров заданных в теге img . А может всётаки сравнивать размеры нужно приходящего изображения ,после его полного получения ? скрипт -на помойку


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