0

我已经设置了一个小型演示，当单击它时会自动调整图像大小以适应其容器 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');
}
});
4

1 回答 1

1

就在我的脑海中，我敢打赌这是一个关闭问题。由于您在函数内部引用“this”，这些函数也在另一个函数内部，因此“this”没有附加到图像而是附加到窗口。您可以更新函数以传递对“this”的引用作为参数，或者设置一个变量范围为引用回“this”的 click 函数。

于 2011-02-04T15:45:06.980 回答