在 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”的单击函数的变量。