JavaScript 实现图片自动缩放至指定尺寸

作者:拾光时间:2026-10-23 17:33:06浏览:667

本文介绍如何使用JavaScript在页面加载时动态调整图片尺寸。当图片原始宽高超过100像素时,自动将其限制为100x100,否则保持原图大小。该方法通过img标签的onload事件调用resizeImage函数实现,经测试在IE6、Firefox及Chrome浏览器中均可正常工作。

JavaScript 实现图片自动缩放至指定尺寸

近期项目开发中遇到图片显示需求:当图片原始尺寸大于100x100像素时,需将其缩小至100x100;若图片本身小于该尺寸,则保持原始大小不变。经研究,可通过简单的JavaScript代码实现此功能。


具体JavaScript实现代码如下:


代码示例如下:

<script>
function resizeImage(obj){if(obj.height>100)obj.height=100;if(obj.width>100)obj.width=100; }
</script>

页面HTML调用方式如下:


代码示例如下:

﹤img src="file:///E|/Pictures/22.jpg" width="385" height="350" onload="resizeImage(this)"﹥

经测试,该方案在IE6、Firefox以及Google Chrome浏览器中均能正常运行。


作者最新文章