微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

js 控制图片大小核心讲解_javascript技巧

php中文网
发布： 2016-05-16 17:20:46
原创
1175人浏览过

缩放图片脚本分享

MakeSong
MakeSong

AI音乐生成，生成高质量音乐，仅需30秒的时间

MakeSong 145
查看详情 MakeSong
复制代码 代码如下:




New Document





<script> <br><br>function AutoResizeImage(maxWidth,maxHeight){ <BR>var objImg = document.getElementById("operImg"); <BR>var img = new Image(); <BR>img.src = objImg.src; <BR>var hRatio; <BR>var wRatio; <BR>var Ratio = 1; <BR>var w = img.width; <BR>var h = img.height; <BR>wRatio = maxWidth / w; <BR>hRatio = maxHeight / h; <BR>if (maxWidth ==0 && maxHeight==0){ <BR>Ratio = 1; <BR>}else if (maxWidth==0){// <BR>if (hRatio<1) Ratio = hRatio; <BR>}else if (maxHeight==0){ <BR>if (wRatio<1) Ratio = wRatio; <BR>}else if (wRatio<1 || hRatio<1){ <BR>Ratio = (wRatio<=hRatio?wRatio:hRatio); <BR>} <BR>if (Ratio<1){ <BR>w = w * Ratio; <BR>h = h * Ratio; <BR>} <BR>objImg.height = h; <BR>objImg.width = w; <BR>} <BR></script>





534 X 800









重点js:
复制代码 代码如下:

function AutoResizeImage(maxWidth,maxHeight){
var objImg = document.getElementById("operImg");
var img = new Image();
img.src = objImg.src;
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}else if (maxHeight==0){
if (wRatio}else if (wRatioRatio = (wRatio}
if (Ratiow = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}
相关标签：
js

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：JQuery中form验证出错信息的查看方法_jquery 下一篇：js中单引号与双引号冲突问题解决方法_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
深入理解JavaScript_严格模式特性 严格模式通过"usestrict"启用，限制不安全语法，禁止未声明变量、删除变量、重复参数等，提升代码安全与质量。
2025-11-24 10:35:36
833
JavaScript路由系统_History API深度应用 单页应用通过HistoryAPI实现无刷新跳转，利用pushState、replaceState修改URL并监听popstate事件响应路由变化，摆脱hash依赖，结合服务端配置处理404和SEO，构建流畅用户体验。
2025-11-24 10:33:05
271
在LangChain.js中追踪OpenAI模型Token使用量与成本的教程 本文旨在解决LangChain.js用户在追踪OpenAI模型Token使用量和成本时遇到的挑战。不同于Python版本提供的get_openai_callback()，LangChain.js框架中没有直接对应的API。我们将详细介绍如何通过配置LLM实例的callbacks属性，利用handleLLMEnd回调函数来实时捕获并累计每次模型运行的Token消耗数据，并提供代码示例及注意事项，帮助开发者有效管理和优化LLM应用成本。
2025-11-24 10:07:17
139
JavaScript中实现随机选择：正确运用Math对象与Switch语句 本文旨在指导开发者如何在JavaScript中正确实现随机元素选择，以解决在FNF等模组开发中遇到的随机图片不显示问题。文章将详细解析Math对象的正确用法、Math.random()生成指定范围整数的技巧，以及switch语句的规范语法，并通过示例代码展示如何避免常见的语法错误和逻辑陷阱，确保随机功能稳定运行。
2025-11-24 09:51:18
246
JavaScriptES2019特性_数组扁平化与对象转换 ES2019引入了flat()、flatMap()和Object.fromEntries()三个实用方法。flat()用于扁平化嵌套数组，支持指定深度或Infinity彻底展开；flatMap()先映射再扁平一层，适用于拆分字符串等场景；Object.fromEntries()将键值对列表转为对象，是Object.entries()的逆操作，便于对象与Map间转换及过滤重建对象。这些特性提升了数据处理效率与代码可读性。
2025-11-24 09:33:10
502
掌握JavaScript随机数生成与Switch语句：实现动态内容切换 本教程旨在解决JavaScript中实现随机内容（如图片）切换时遇到的常见问题，特别是针对Math.random()的错误使用和switch语句的语法误区。我们将详细讲解如何正确利用JavaScript的Math对象生成指定范围内的随机整数，并结合switch语句实现基于随机结果的动态内容选择，从而帮助开发者避免常见的语法陷阱，确保随机化功能按预期工作。
2025-11-24 09:14:22
587
JavaScript物理引擎_刚体运动模拟原理 刚体运动是JavaScript物理引擎的基础，通过位置、速度、加速度、质量、角速度和旋转角度等属性模拟物体的平移与旋转。引擎利用牛顿第二定律$F=ma$计算加速度，并逐帧更新速度和位置；旋转部分则基于角速度和力矩更新。碰撞检测常用AABB、圆形或SAT方法判断重叠，再通过碰撞点、法线和穿透深度计算响应，依据动量守恒和弹性系数调整速度。数值积分如欧拉法、半隐式欧拉法或Verlet积分用于状态预测，其中半隐式欧拉更稳定，Verlet适合特定场景。掌握这些原理可构建基础物理系统，实际开发中可借助Box
2025-11-24 02:21:25
284
数组去重：多种方案与性能对比 答案：数组去重推荐使用Set（基本类型）、Map标记法（对象数组），根据数据类型、规模和环境选择方案。
2025-11-24 01:53:18
406
Node.js应用在Railway平台连接MySQL数据库的排查与解决 在Railway等云平台部署Node.js应用时，连接MySQL数据库常遇到ETIMEDOUT和ENOTFOUND等错误。本教程将深入分析这些错误，并提供一套完整的解决方案，包括从传统回调式连接到基于Promise的连接池迁移、利用环境变量管理凭证，以及在Express路由中采用async/await模式处理数据库操作，确保应用稳定高效地连接到MySQL服务。
2025-11-23 23:54:32
612
实现动态加载与跳转的垂直信息流教程 本文深入探讨了如何构建一个高性能的垂直信息流或时间线，该组件能够动态加载数据以应对海量内容，并在用户滚动到列表末尾时自动获取新项目。此外，文章还详细介绍了实现跳转到特定位置（如历史记录中的某个日期）的功能，确保在不加载全部数据的情况下，高效地显示目标位置及其周围的内容。通过一个无第三方库依赖的JavaScriptFeedEngine实现，提供了一个简洁而强大的解决方案。
2025-11-23 23:54:06
115
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部