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 -не нужно высоту или ширину предварительно задавать у тега вообще. Цитата:
-так же обратите внимание на единицы измерения |
Часовой пояс GMT +3, время: 16:33. |