图片完美缩放


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 相关文章推荐
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 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 Ajax实现页面无刷新发表评论
2007/01/02 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
Jquery性能优化详解
2014/05/15 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
layui 设置table 行的高度方法
2018/08/17 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
使用grappelli为django admin后台添加模板
2014/11/18 Python
Python编程之属性和方法实例详解
2015/05/19 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
python多进程实现文件下载传输功能
2018/07/28 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
Django自带的用户验证系统实现
2020/12/18 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
教育孩子心得体会
2014/01/01 职场文书
战友聚会邀请函
2014/01/18 职场文书
重阳节登山活动方案
2014/02/03 职场文书
学生操行评语大全
2014/04/24 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
党员年终个人总结
2015/02/14 职场文书
红歌会主持词
2015/07/02 职场文书
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python