VPF::Ресайз картинки под размер дива

AXS

Дата 7.7.2010, 08:43 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 26.9.2008
Где: РК

Репутация: нет
Всего: -1

Есть сайт с резиновой вёрсткой по ширине. К тому же wrapper растянут на всю высоту окна браузера.
Внутри wrapper'a есть div (#photo), а в этом div'e поочерёдно показываются картинки (#mainphoto)
Ну понятно вроде... Типа слайд-шоу
Да... Div тоже резиновый )

Задача в следующем - при изменении размеров окна изменять размер картинки пропорционально, чтобы влезала в ширину и не появлялась вертикальная прокрутка.

В JS я не особо силён, поэтому сваял такое:

Код


   <body onresize="photoresize();">

Код


function photoresize() {
    pW = document.getElementById('mainphoto').offsetWidth;
    pH = document.getElementById('mainphoto').offsetHeight;
    bW = document.getElementById('photo').offsetWidth;
    bH = document.getElementById('wrapper').offsetHeight - 108;
    /*alert(pW+' '+pH+' '+bW+' '+bH);*/
    pP = pW / pH;
    bP = bW / bH;
    if (pP > bP) { /* По ширине */
        iP = bW / pW;
        nW = pW * iP;
        nH = nW / pP;
    }else{ /* По высоте */
        iP = bH / pH;
        nH = pH * iP;
        nW = nH * pP;
    }
    document.getElementById('mainphoto').width = Math.round(nW);
    document.getElementById('mainphoto').height = Math.round(nH);
}

Так то оно работает, но! Если слегка шевелить размер окна +-несколько пикселей, то картинка постепенно сужается.. )

Как это побороть? Может как то проще можно ресайзить, да я просто не знаю? smile

Добавлено через 14 минут и 52 секунды
А... Всё... Въехал.

Я получал размер картинки в настоящий момент, то есть уже ресайзнутой.
А надо было юзать naturalWidth и naturalHeight

Код


    pW = document.getElementById('mainphoto').naturalWidth;
    pH = document.getElementById('mainphoto').naturalHeight;

Хотя если есть возможность оптимизировать код - не откажусь от советов.

--------------------

<><><> AXS - Live Organizer v1.0 <><><> 0_o

AXS

Дата 7.7.2010, 09:48 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 26.9.2008
Где: РК

Репутация: нет
Всего: -1

И к тому же в Опере и IE не работает...

--------------------

<><><> AXS - Live Organizer v1.0 <><><> 0_o

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »