图片完美缩放


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 jsFiddle JSBin在线调试器
Mar 14 Javascript
jquery常用操作小结
Jul 21 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
详解Node.JS模块 process
Aug 31 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提交post数组参数实例分析
2015/12/17 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
python实现在pickling的时候压缩的方法
2014/09/25 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
python flask 多对多表查询功能
2017/06/25 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
用Django写天气预报查询网站
2018/10/21 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
轻松制作精彩视频:Animoto
2018/09/19 全球购物
疾病捐款倡议书
2014/05/13 职场文书
应届大专生自荐书
2014/06/16 职场文书
六查六看自查报告
2014/10/14 职场文书
事业单位年度考核评语
2014/12/31 职场文书
Node.js实现断点续传
2021/06/23 Javascript
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫