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

【问题标题】：How to display part of an image for the specific width and height?如何显示特定宽度和高度的图像的一部分？
【发布时间】：2013-11-13 16:57:36
【问题描述】：

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

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

谢谢。

【问题讨论】：

标签： javascript css image image-processing imageview

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案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>

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

感谢这个网站的朋友。

【讨论】：