Question

最近我参与了一个网页项目，它有大量的图像可以在网页上处理和显示，我们知道最终用户上传的图像的宽度和高度不能轻易控制，然后很难显示。起初，我试图放大/缩小图像来重新制作一个合适的演示文稿，我做到了，但我的老板仍然不满意我的解决方案，以下是我的方式：

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并使用图像作为背景图像，这种方式太复杂而且不直接我不想采取。所以我想知道是否有更好的方法来显示具有固定宽度和高度的图像而没有呈现失真？

感谢。

Answer 1

我建议您查看twitter bootstraps carousel之类的内容。在这里，他们使用div中的图像标签，并通过将图像属性设置为

来调整大小

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

您可以在此little fiddle中看到一个小例子。

通过将高度设置为自动，它将保持比例不变。通过设置max-width：100％，它不会放大图像的原始大小。

Answer 2

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

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>

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

感谢本网站的朋友们。

如何显示特定宽度和高度的图像部分？

2 个答案: