如果图像大于视口,请使用Javascript调整图像大小

时间:2011-08-22 23:12:49

标签: javascript html css styling viewport

目前我正在使用此代码来使用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调整图像大小。我也想要一些帮助,因为我不知道接下来要做什么来完成代码。谢谢。 :)

1 个答案:

答案 0 :(得分:3)

之前曾提出类似问题:
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/