如果图像大于视口，则使用 Javascript 重新调整图像大小答案

【问题标题】：Re-sizing an image with Javascript if image is bigger than the viewport如果图像大于视口，则使用 Javascript 重新调整图像大小
【发布时间】：2011-08-23 08:04:33
【问题描述】：

目前我正在处理此代码以使用 javascript 调整图像大小

function resize(which) {
    var elem = document.getElementById(which);
    if (elem == undefined || elem == null) return false;
        if (max == undefined) {
            if (elem.width > document.documentElement.clientWidth) {

            } else if (elem.height > document.documentElement.clientHeight) {

            } else if (elem.height > document.documentElement.clientHeight && elem.height > document.documentElement.clientWidth) {

            }
        }
        if (elem.width > elem.height) {
            if (elem.width > max) 
                elem.width = max;
        } else {
            if (elem.height > max) 
                elem.height = max;
        }
}

我想知道如果图像大于客户端视口，我是否正朝着正确的方向使用 javascript 调整图像的大小。我也需要一些帮助，因为我不知道接下来要做什么来完成代码。谢谢。 :)

【问题讨论】：

如果您可以缩进该代码，它会更容易阅读。
你不能使用jQuery或其他一些库吗？ jQuery 提供了出色的功能来检测元素的位置：api.jquery.com/position - 并且具有也可以提供帮助的插件：appelsiini.net/projects/viewport。其他库也会有类似的功能（虽然可能没有 jQuery 那么多）。
@Robin Winslow，如果需要，我可以使用 jQuery。

标签： javascript html css styling viewport

【解决方案1】：

之前有人问过类似的问题：
Image resize to fit screen

此外，这个 jQuery 插件似乎完全符合您的需要：
http://code.google.com/p/jquery-imagefit-plugin/

如果您在 100% 高、100% 宽的元素上执行此操作：
http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

以下是此解决方案的示例：
http://jsfiddle.net/nottrobin/zndkg/

【讨论】：