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

Question

最近参与了一个web元素，有大量的图片需要处理和显示在网页上，我们知道最终用户上传的图片的宽高是不容易控制的，所以很难显示。起初，我试图通过放大/缩小图像来寻找合适的呈现方式，我做到了，但我的老板仍然对我的解决方案不满意，以下是我的方法:

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% 它不会将图像放大到超过其原始大小。