图片完美缩放


Posted in Javascript onSeptember 07, 2006

在公司的工作经常要为客户作产品展示的页面,由于客户上传的图片格式大小不一,缩放后会导致变形,于是在星期天抽了点时间,写了一段JS代码,支持图片的完美缩放。
首先给图片加个<div></div>标签对,img中不能定义高度或宽度,如下:
<div class="product_img_div"><img src="images/test.jpg" class="product_img" /></div> 在CSS中写入代码:.product_img_div {width:210px;height:190px;overflow:hidden}
作用是控制图片载入时,溢出部分隐藏,这样就不会把界面撑得太难看。

ReSizeImg("product_img",200,180); 
function ReSizeImg(cName,w,h){ 
    var reImgs = document.getElementsByTagName("img"); 
    for (j=0;j<reImgs.length;j++){ 
        if (reImgs[j].className==cName && (reImgs[j].height>h || reImgs[j].width>w)) { 
            if (reImgs[j].height==reImgs[j].width) { 
                reImgs[j].height=h;reImgs[j].width=w; 
            } else if (reImgs[j].height>reImgs[j].width) { 
                reImgs[j].height=h; 
            } else if (reImgs[j].height<reImgs[j].width){ 
                reImgs[j].width=w; 
            } 
        } 
    } 
}

测试后,图片大小完美缩放,也解决了在载入时会把界面撑得很难看的问题。
Javascript 相关文章推荐
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
prototype class详解
Sep 07 #Javascript
IE中jscript/javascript的条件编译
Sep 07 #Javascript
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 #Javascript
彪哥1.1(智能表格)提供下载
Sep 07 #Javascript
日期函数扩展类Ver0.1.1
Sep 07 #Javascript
js脚本学习 比较实用的基础
Sep 07 #Javascript
prototype 的说明 js类
Sep 07 #Javascript
You might like
php中iconv函数使用方法
2008/05/24 PHP
PHP parse_url 一个好用的函数
2009/10/03 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
php 中的closure用法详解
2017/06/12 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
webpack配置sass模块的加载的方法
2017/07/30 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
python2.7到3.x迁移指南
2018/02/01 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
自荐书4要点
2014/01/25 职场文书
车间机修工岗位职责
2014/02/28 职场文书
六查六看六改心得体会
2014/10/14 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
党员年终个人总结
2015/02/14 职场文书
数据库连接池
2021/04/06 MySQL
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫