图片完美缩放


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 相关文章推荐
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
微信小程序滑动选择器的实现代码
Aug 10 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
layui复选框限制选择个数的方法
Sep 18 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作的文本留言本的例子(三)
2006/10/09 PHP
PHP面向对象详解(三)
2015/12/07 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
python生成IP段的方法
2015/07/07 Python
深入理解Python中字典的键的使用
2015/08/19 Python
numpy中矩阵合并的实例
2018/06/15 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
车祸赔偿收入证明
2014/01/09 职场文书
父母对孩子说的话
2014/04/12 职场文书
集中整治工作方案
2014/05/01 职场文书
2014年残联工作总结
2014/11/21 职场文书
领导离职感言
2015/08/03 职场文书