javascript - 如果图像大于视口(viewport),则使用 Javascript 重新调整图像大小

标签 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;
        }
}

我想知道如果图像比客户端视口(viewport)大,我是否正朝着正确的方向前进,使用 javascript 调整图像大小。我也需要一些帮助,因为我不知道下一步该怎么做才能完成代码。谢谢。 :)

最佳答案

之前有人问过类似的问题:
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/

关于javascript - 如果图像大于视口(viewport),则使用 Javascript 重新调整图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7154682/

相关文章:

javascript - 如何将复选框值数据绑定(bind)到 Javascript 对象

html - 在提交按钮中给文本加下划线(html、css)

javascript - 模态弹出在打开时淡入点击并在关闭时淡出

javascript - 创建变量、在函数中使用变量以及调用函数

javascript - Visual Studio Code - TypeScript 类型检查 - 识别 JavaScript 项目中的外部对象

HTML - Button 与 Internet Explorer 和 Firefox 的兼容性

html - 标题元素未在 css 中正确定位

css - 为什么显示:table gives extra spacing?

javascript - 从表单提交批准/拒绝按钮中选择下拉菜单值

javascript - 上传文件时如何将 "progress"和更新事件绑定(bind)到ajax请求