图片完美缩放


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 相关文章推荐
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
Underscore源码分析
Dec 30 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
原生js拖拽实现图形伸缩效果
Feb 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
mysql中存储过程、函数的一些问题
2007/02/14 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
详细讲解JS节点知识
2010/01/31 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
跟老齐学Python之Python文档
2014/10/10 Python
python的re正则表达式实例代码
2018/01/24 Python
查看Django和flask版本的方法
2018/05/14 Python
django解决跨域请求的问题详解
2019/01/20 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
计算机学生求职信范文
2014/01/30 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
2014年秘书工作总结
2014/11/25 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
重阳节活动主持词
2015/07/04 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python