图片完美缩放


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 typeof 用法
Dec 28 Javascript
JavaScript 图片预览效果 推荐
Dec 22 Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
AJAX实现省市县三级联动效果
Oct 16 Javascript
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
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各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
详解PHP中的PDO类
2015/07/06 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
js实现div色块碰撞
2020/01/16 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
快速查找Python安装路径方法
2020/02/06 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
大一自我鉴定范文
2013/10/04 职场文书
行政前台岗位职责
2013/12/04 职场文书
自我鉴定总结
2014/03/24 职场文书
租赁意向书范本
2014/04/01 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
一个都不能少观后感
2015/06/04 职场文书
百年孤独读书笔记
2015/06/29 职场文书
SQL写法--行行比较
2021/08/23 SQL Server
mysql配置SSL证书登录的实现
2021/09/04 MySQL