Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Изменение размеров в зависимости от картинки (https://javascript.ru/forum/dom-window/2326-izmenenie-razmerov-v-zavisimosti-ot-kartinki.html)

lanzs 08.12.2008 18:38

Изменение размеров в зависимости от картинки
 
Имеется: некоеторое подобии галереи, т.е. снизу каруселька с маленькими (уменьшенными) картинками, щелкаем на какую-либо и она занимает место в центральной рамке.

Необходимо сделать следующее: т.к. рамка заданных размеров, то нужно, чтобы: если размеры изображения меньше размеров рамки, то изображение просто вставляется по центру. А если изображение больше, то оно подгоняется под размеры рамки, т.е. принимает размеры рамки.
Как сделать - понять не могу *(( прошу помощи!!

lanzs 08.12.2008 19:33

для смены картинок использовал этот вариант: http://itsoft.ru/docs/web/c05_swap.php?&for_printing

предположения: использовать offsetHeight и offsetWeight для получения размеров картинки, которая сейчас замещается, а потмо сравниваем и устанавливаем переменные, которые будут иметь либо размер поля, либо размер картинки. Но вот как получить размеры картинки с помощью offsetHeight и offsetWeight и как их потом передать в <img...> - не могу понять *((
до этого, если нужно было получить размеры объекта, то получал их с помощью offsetHeight и offsetWeight обращаясь к нему через document.getElementById('...');

PavelPetrov 09.12.2008 00:30

Цитата:

если изображение больше, то оно подгоняется под размеры рамки
А если они гораздо больше?... Картинка ужмется. Тут есть один прием (не знаю, подойдет или нет). Можно в <IMG> , где выводится картинка, явно задать высоту(height=n_px) ИЛИ ширину(width=n_px). В вашем случае, если каруселька снизу, то задавать надо высоту а ширину не указывать совсе. Тогда, браузер будет Выводить все картинки заданной высоты, а ширину высчитывать автоматически. Т. е. если по высоте картинка меньше, то браузер ее растянет до указанной. Если больше, то ужмет. При этом ширина будет расчитана автоматически с учетом пропорций.

lanzs 09.12.2008 18:40

я уже думал об этом, но получается плохо, т.к. есть маленькие картинки, а если их растягивать, то смотрится не очень.
С размерами можно будет что-то придумать, т.е. как их сжимать...это я уже делал, но в php, а вот с java проблемы из-за недостатка знаний...
пока пробую в функции MM_swapImage() получать размеры изображения x и их изменять..но что-то не получается

PavelPetrov 10.12.2008 00:13

Интересно, можно ли через javascript получить размеры изображения до его загрузки?
Покапался в браузерах (Internet Explorer, Opera, FireFox). Оказалось, что только FireFox "знает" реальные размеры загруженного изображения.:confused: , остальные знают только те, которые в теге <img> или если не указаны, то реальные.
Ничего лучше не придумал, как загружать изображение в невидимом элементе, брать его размеры, вычислять новые размеры (под рамку), изменять атрибуты width и height для видимого изображения и только потом загружать рисунок куда надо.
Черновичек того, что получилось можно посмотреть здесь. Для удобства и меньших вычислений взял квадратную рамку.

Kolyaj 10.12.2008 00:48

Цитата:

Сообщение от PavelPetrov
Интересно, можно ли через javascript получить размеры изображения до его загрузки?

Телепатически чтоли?

PavelPetrov 10.12.2008 19:25

Kolyaj,
Вместо того, чтобы задавать умные вопросы в ответ на глупые, пояснил бы возможно ли в Internet Explorer получить значения аналогичные naturalHeight и naturalWidth в FireFox.

Kolyaj 10.12.2008 20:13

Я в таких случаях не выставляю ширину и высоту в стилях и беру offsetWidth/offsetHeight.

PavelPetrov 10.12.2008 21:07

Цитата:

Я в таких случаях не выставляю ширину и высоту в стилях и беру offsetWidth/offsetHeight.
Для данной задачи (каруселька снизу), получим эффект дергания при изменении высоты следующей картинки. Пользователю придется постоянно "ловить" карусельку.

Kolyaj 10.12.2008 21:39

Создайте еще одну картинку с тем же src. В DOM ее добавлять необязательно.


Часовой пояс GMT +3, время: 06:20.