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

作者:拾光

时间:2026-10-23

浏览:666

本文介绍如何使用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浏览器中均能正常运行。


实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章