Question

（10个显示图像的声誉?? ......真的吗？......）

大家好。

我正在经历的问题是，

when I resize images, they are resized more than once I believe.

例如，

I uploaded a square image, but the result is rectangle.

当出现错误结果时，我用F5键刷新页面，它们看起来很方正。

仅高度og调整大小的图像是问题。

以下是我用来调整这些图片大小的代码。

function thumbnail_resize(obj) {
    var maxW = 50;      var maxH = 50;
    var wid = obj.width();
    var hei = obj.height();

    if( wid > maxW ) {
        hei *= (maxW / wid);
        wid = maxW;
    }
    if( hei > maxH ) {
        wid *= (maxH / hei);
        hei = maxH;
    }
    obj.attr('width', wid);
    obj.attr('height', hei);

    delete maxW, maxH, wid, hei;
    return;
}

目前我相信在调整这些图像的高度时，会多次应用调整大小比例（即=＆gt; hei * = maxW / wid;）。

请给我一些wisedom !!!

Answer 1

首先，如果你想保持宽高比，你不需要同时应用高度和宽度：

function thumbnail_resize(obj) {
    var maxW = 50;      var maxH = 50;
    var wid = obj.width();
    var hei = obj.height();

    if ( wid > hei ) {
       if( wid > maxW ) {
            obj.attr('width', maxW);
       }
    } else {
        if( hei > maxH ) {
            obj.attr('height', maxH);
        }
    }

    return;
}

你应该看到这个article关于图像加载和在加载时操纵它们。您不能简单地期望它在IE中的document.ready，尤其是上工作。

Answer 2

您的部分问题似乎是您正在$(document).ready()中查看图像的高度和宽度，并且图像可能尚未全部加载，这意味着它们的高度和宽度可能尚未生效。当您点击重新加载时，图像将来自浏览器缓存，它们的加载速度会更快，因此在重新加载后它们可能会在$(document).ready()内准备就绪。

如果这些图片都在您网页的原始HTML中（并且未动态插入），那么您可以使用$(window).load()触发调整大小功能，并在触发时全部加载图像。

此外，您可以将高度和宽度的设置限制为仅最长边 - 您不必同时设置两者。仅设置一个维度将允许浏览器调整另一个维度并保持原始宽高比。如果您的最大高度和最大宽度相同，则可以这么简单：

function thumbnail_resize(obj) {
    var maxDimension = 50;
    var width = obj.width();
    var height = obj.height();
    // if either dimension is too big, then make the longer one smaller
    if (Math.max(width, height) > maxDimension) {
        if (height > width) {
            obj.height(maxDimension);
        } else {
            obj.width(maxDimension);
        }
    }
}

使用jquery按比例调整图像大小时的小错误。

2 个答案: