在jQuery中调整图像大小

Question

我已经设置了一个小型演示程序，它可以在点击图像时自动调整图像的大小以适应它的容器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'); 
} 
}); 

Answer 1

恰好是我的头顶，我敢打赌，这是一个关闭问题。由于您在函数中引用了'this'，这些函数也在另一个函数内部，因此'this'不会附加到图像上，而是附加到窗口上。您可以更新函数以将“this”的引用作为参数进行传递，也可以将变量的作用范围设置为引用“this”的click函数。