图片完美缩放


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应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
javascript打开word文档的方法
Apr 16 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
Vue数据绑定简析小结
May 07 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
PHP连接access数据库
2015/03/27 PHP
自制PHP框架之设计模式
2017/05/07 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
信用卡逾期证明示例
2014/09/13 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
python简单验证码识别的实现过程
2021/06/20 Python
SQL Server中锁的用法
2022/05/20 SQL Server