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函数的变量。

在jQuery中调整图像大小

1 个答案: