图片完美缩放


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 相关文章推荐
关于COOKIE个数与大小的问题
Jan 17 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
js实现纯前端压缩图片
Nov 16 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 批量删除数据的方法分析
2009/10/30 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
PHP pear安装配置教程
2016/05/14 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
在vue中安装使用vux的教程详解
2018/09/16 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
中专毕业生自荐信
2013/11/16 职场文书
师范生的个人求职信范文
2014/01/04 职场文书
重阳节登山活动方案
2014/02/03 职场文书
2015年档案室工作总结
2015/05/23 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python