图片完美缩放


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 相关文章推荐
js setattribute批量设置css样式
Nov 26 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 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
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
基于JQuery的cookie插件
2010/04/07 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
flask入门之表单的实现
2018/07/18 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
酒店应聘自荐信
2013/11/09 职场文书
心得体会范文
2014/01/04 职场文书
文明餐桌活动方案
2014/02/11 职场文书
材料物理专业求职信
2014/09/01 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2014年公司工作总结
2014/11/22 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
观后感格式
2015/06/19 职场文书
活动新闻稿范文
2015/07/17 职场文书
青年联谊会致辞
2015/07/31 职场文书
导游词之南京栖霞山
2019/10/18 职场文书