1

最近我参与了一个网页项目，需要处理和在网页上显示大量的图像，我们知道最终用户上传的图像的宽度和高度无法轻松控制，并且很难显示。起初，我尝试放大/缩小图像以找到合适的演示文稿，并且成功了，但是我的老板仍然对我的解决方案不满意，以下是我的方式：

var autoResizeImage = function(maxWidth, maxHeight, objImg) {
    var img = new Image();
    img.src = objImg.src;

    img.onload = function() {
        var hRatio;
        var wRatio;
        var Ratio = 1;

        var w = img.width;
        var h = img.height;

        wRatio = maxWidth / w;
        hRatio = maxHeight / h;

        if (maxWidth == 0 && maxHeight == 0) {
            Ratio = 1;
        } else if (maxWidth == 0) {
            if (hRatio < 1) {
                Ratio = hRatio;
            }
        } else if (maxHeight == 0) {
            if (wRatio < 1) {
                Ratio = wRatio;
            }
        } else if (wRatio < 1 || hRatio < 1) {
            Ratio = (wRatio <= hRatio ? wRatio : hRatio);
        }

        if (Ratio < 1) {
            w = w * Ratio;
            h = h * Ratio;
        }

        w = w <= 0 ? 250 : w;
        h = h <= 0 ? 370 : h;

        objImg.height = h;
        objImg.width = w;
    };
};

这种方式只是为了限制图像的最大宽度和高度，以便相册中的每张图像仍然具有不同的宽度和高度，这仍然非常紧迫。

而此时此刻，我知道我们可以创建一个DIV并将图像用作它的背景图像，这种方式太复杂而且不直接我不想采用。所以我想知道是否有更好的方法来显示具有固定宽度和高度的图像而不会出现呈现失真？

谢谢。

4

2 回答 2

0

我按照以下步骤解决了这个问题：

1，编写一个方法将图像放大/缩小到您想要的适当宽度和高度：

var autoResizeImage = function(targetWidth, targetHeight, objImg) {
    if (0 >= targetWidth || 0 >= targetHeight) {
        // Ilegal parameters, just return.
        return;
    }

    var img = new Image();
    img.src = objImg.src;

    // Calculate the width and height immediately the image is loaded. 
    img.onload = function() {
        var hRatio;
        var wRatio;

        var width = img.width;
        var height = img.height;

        var calcWidth = width;
        var calcHeight = height;

        wRatio = targetWidth / width;
        hRatio = targetHeight / height;

        if (wRatio < hRatio) {
            calcWidth = targetWidth;
            calcHeight = (targetHeight / height) * targetHeight;
        } else {
            calcHeight = targetHeight;
            calcWidth = (targetWidth / width) * targetWidth;
        }

        objImg.width = calcWidth;
        objImg.height = calcHeight;
    };
};

然后在其 onload 事件中调用此方法，例如

<img src='PATH' onload='autoResizeImage(740, 460, this)'/>

2，在此图像之外创建一个 DIV 并设置您想要图像显示的宽度和高度：

<div style='width: 740px; height: 460px; overflow:hidden;'></div>

然后图像将以您设置的固定宽度和高度显示。

感谢这个网站的朋友。

于 2013-11-13T08:57:36.653 回答
0

我建议看一下twitter bootstraps carousel 之类的东西。在这种情况下，他们在 div 中使用图像标签，并通过将图像属性设置为类似

img {
    height: auto;
    max-width: 100%;
}

你可以在这个小小提琴中看到一个小例子。

通过将高度设置为自动，它将保持比率不变。通过设置 max-width: 100% 它不会将图像放大到原始大小。

于 2013-11-13T03:50:24.433 回答