tempad
ReadyGo!技术成就梦想 >>Java >> JavaScript实现网页图片等比例缩放效果

JavaScript实现网页图片等比例缩放效果

ReadyGo!技术成就梦想 网络搜索 efish 2008-7-6 17:59:36

在处理网页图片时，特别是一些图片列表的应用里面，很难保证图片统一大小，直接设置图片大小又会导致图片拉伸，造成图片模糊，本文介绍的代码可以在图片加载完成后自动按比例调整图片大小。

Javascript：

<script language="javascript" type="text/javascript"> <!-- // 说明：用 JavaScript 实现网页图片等比例缩放 // 整理：http://www.CodeBit.cn function DrawImage(ImgD,FitWidth,FitHeight) { var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0) { if(image.width/image.height>= FitWidth/FitHeight) { if(image.width>FitWidth) { ImgD.width=FitWidth; ImgD.height=(image.height*FitWidth)/image.width; } else { ImgD.width=image.width; ImgD.height=image.height; } } else { if(image.height>FitHeight) { ImgD.height=FitHeight; ImgD.width=(image.width*FitHeight)/image.height; } else { ImgD.width=image.width; ImgD.height=image.height; } } } } //--> <script>

调用方式：

<ccid_file values="1148202890" alt="自动缩放后的效果" onload="javascript:DrawImage(this,200,200);" / />

如果图片较大，建议在图片标签里面同时设置期望的图片大小，这样不会导致页面在加载中撑开，该大小不会影响最终缩放效果。可以修改上面的代码为：

<ccid_file values="1148202890" alt="自动缩放后的效果" width="200" height="200" onload="javascript:DrawImage(this,200,200);" / />

（责任编辑：云子）

责任编辑: efish 参与评论 查找更多：
相关文章
Linux环境下Java开发 Linux和Windows比较 Linux环境下Java开发 Linux和Windows比较
使用Java程序连接各种数据库的方法介绍 使用Java程序连接各种数据库的方法介绍
Java 安全性综述：安全性的基本要点 Java 安全性综述：安全性的基本要点
新手学堂：几个著名Java开源缓存框架介绍 新手学堂：几个著名Java开源缓存框架介绍
如何在Java程序中实现FTP的上传下载功能 如何在Java程序中实现FTP的上传下载功能
Windows操作系统下JSP程序开发环境配置 Windows操作系统下JSP程序开发环境配置
Java加密技术：对Atom进行签名 加密和解密 Java加密技术：对Atom进行签名 加密和解密
为Tomcat注册的Windows服务增加安全参数 为Tomcat注册的Windows服务增加安全参数
Eclipse工具下开发Struts解决乱码的问题 Eclipse工具下开发Struts解决乱码的问题
JSP动态网站环境搭建应用中详细步骤介绍 （1） JSP动态网站环境搭建应用中详细步骤介绍 （1）
2秒记住本站域名

玩过泡泡龙吗？Readygo?Go! 再加上.Com.Cn的后缀，那就是大名小顶的ReadyGo.com.cn

分类导航
ReadyGo!技术成就梦想