图片完美缩放


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 相关文章推荐
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
JS倒计时两种实现方式代码实例
Jul 27 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 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
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
python实用代码片段收集贴
2015/06/03 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
Python selenium自动化测试模型图解
2020/04/15 Python
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
化工专业推荐信范文
2013/11/28 职场文书
学术会议欢迎词
2014/01/09 职场文书
高中自我评价范文
2014/01/27 职场文书
班级安全教育实施方案
2014/02/23 职场文书
小摄影师教学反思
2014/04/27 职场文书
班主任个人工作反思
2014/04/28 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
八月迷情观后感
2015/06/11 职场文书
任命书格式范文
2015/09/22 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
Python基础之进程详解
2021/05/21 Python
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python