图片完美缩放


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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
input 高级限制级用法
Mar 26 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
webpack3之loader全解析
Oct 26 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 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 验证码制作(网树注释思想)
2009/07/20 PHP
php session和cookie使用说明
2010/04/07 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
JQuery select标签操作代码段
2010/05/16 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
简单介绍Python中的JSON使用
2015/04/28 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
Python对excel的基本操作方法
2021/02/18 Python
初三家长会邀请函
2014/01/18 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
警示教育片观后感
2015/06/17 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
详解Java实践之建造者模式
2021/06/18 Java/Android
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技