изменение размера изображений в jQuery - PullRequest
Новая
       44

изменение размера изображений в jQuery

0 голосов
/ 04 февраля 2011

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

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

Единственная проблема в том, что это довольно глючно. Он работает, но вместо изменения размера в зависимости от ширины изображения он, похоже, рассчитывает его на основе ширины браузера, но все равно передает правильные значения при изменении размера.

Взгляните на него по двум ссылкам ниже и попытайтесь изменить размер окна браузера, чтобы увидеть сбой. Я вычеркнул атрибут overflow:hidden;, чтобы вы могли видеть размеры изображения вне div.

Посмотрите на код здесь: http://jsfiddle.net/sambeckhamdesign/NVAGG/11/

Просмотр полноэкранного результата здесь: http://jsfiddle.net/sambeckhamdesign/NVAGG/11/embedded/result/

или прочитайте jQuery здесь 

$('img').click(function() {
function wr(){
    var imageWidth = 
    $(this).width()/250;
    return imageWidth;
}
function hr(){
    var imageHeight = 
    $(this).height()/200;
    return imageHeight;
}

function nh(){
    var newHeight = 
    $(this).height()/hr();
    return newHeight;
}

function nw(){
    var newWidth = 
    $(this).width()/wr();
    return newWidth;
}

if (wr() > hr()){
    $(this).css('width', nw() + 'px');
}else{
    $(this).css('height', nh() + 'px');
}
});

1 Ответ

1 голос
/ 04 февраля 2011

Сразу скажу, что это закрытый вопрос. Поскольку вы ссылаетесь на «это» внутри функций, которые также находятся внутри другой функции, «это» не привязано к изображению, а скорее к окну. Вы можете обновить функции, передав ссылку "this" в качестве аргумента, или установить переменную, ограниченную функцией click, которая ссылается на this.

...