图片完美缩放


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 相关文章推荐
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
JS实现贪吃蛇游戏
Nov 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
文件上传类
2006/10/09 PHP
计数器详细设计
2006/10/09 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
js常用代码段收集
2011/10/28 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
详解详解Python中writelines()方法的使用
2015/05/25 Python
Python字符串的一些操作方法总结
2019/06/10 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
Python对excel的基本操作方法
2021/02/18 Python
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
报到证丢失证明
2014/01/11 职场文书
招聘单位介绍信
2014/01/14 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
黄河的主人教学反思
2014/02/07 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
公积金贷款承诺书
2015/04/30 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
初中美术教学反思
2016/02/17 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
Python基础教程,Python入门教程(超详细)
2021/06/24 Python