JavaScript 动态改变图片大小
最近由于项目需要,在实现图片的时候,若图片大于100 X 100,则将其缩小为 100 X 100,若比这个小,则保持原图大小。经过研究发现,可以用Javascript代码简单实现。
Javascript代码:
代码如下:
<script>
function resizeImage(obj){if(obj.height>100)obj.height=100;if(obj.width>100)obj.width=100; }
</script>
﹤img src="file:///E|/Pictures/22.jpg" width="385" height="350" onload="resizeImage(this)"﹥
经测试在IE6,Firefox,Google Chrome 均正常工作。
相关推荐
-
JS自动缩小超出大小的图片
复制代码 代码如下: <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> jQuery.fn.LoadImage=function(scaling,width,height,loadpic){ if(loadpic==null)loadpic="../img/lo
-
css+js完美控制图片大小
使用js和css讲图片的现实控制在固定的区域内,大于这个区域的等比例缩放,小于这个区域的居中显示. css+js完美控制图片大小 0 && image.height>0){ flag=true; if(image.width/image.height>= 400/400){ if(image.width>400){ ImgD.width=400; ImgD.height=(image.height*400)/image.width; }else{ ImgD.width=i
-
js 加载时自动调整图片大小
// 方法:setSelectReadOnly 用于设定极select控件ReadOnly, // 这个一个模拟只读不是真的只读 // 使用了onbeforeactivate,onfocus,onmouseover,onmouseout事件 // 示例:< img src='img.jpg' onload='ImgAutoSize(ImgD,FitWidth,FitHeight)' > ; // create by sl // ------------
-
JS检测图片大小的实例
复制代码 代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <input type="hidden" name="MAX_FILE_SIZE" id="MAX_FILE_SIZE" value="8000000" /> <input type="
-
js获取图片大小的函数代码
1.获取图片大小的函数getImageSize 复制代码 代码如下: function getImageSize(imageEl) { var i = new Image(); //新建一个图片对象 i.src = imageEl.src; //将图片的src属性赋值给新建图片对象的src return new Array(i.width, i.height); //返回图片的长宽像素 //return [i.width, i.height]; } 2.示例 复制代码 代码如下: var img
-
JavaScript限定图片显示大小的方法
本文实例讲述了JavaScript限定图片显示大小的方法.分享给大家供大家参考.具体实现方法如下: /** * 限制图片显示的size. * * @param thisobj 图片组件 * @param limitW 限制宽度大小 * @param limitH 限制高度大小 */ function imageResize(thisobj, limitW, limitH) { var newW; var newH; if (thisobj.width > limitW) { newW = lim
-
JS获取图片实际宽高及根据图片大小进行自适应
JS获取图片实际宽高,以及根据图片大小进行自适应 复制代码 代码如下: <img src="http://xxx.jpg" id="imgs" onload="adapt();"/> 复制代码 代码如下: function adapt(){ var tableWidth = $("#imgTable").width(); //表格宽度 var img = new Image(); img.src =$('#imgs
-
纯js实现div内图片自适应大小(已测试,兼容火狐)
这代码实现的功能就是平常我们遇到的一个div里面包含img的时候,在img图片大小未知,div大小未知的情况下,让图片自适应大小,对于图片本身小于div容器大小时,不作处理.因为如果拉伸,图片可能就失真了. 废话不多说,直接上代码,已测试,兼容火狐,谷歌,IE6,IE7/8 以下是js代码: 复制代码 代码如下: <script type="text/javascript" language="javascript"> window.onload=fun
-
JS+css 图片自动缩放自适应大小
我加了css的限制: 复制代码 代码如下: div img {}{max-width:600px;width:600px;width:expression(document.body.clientWidth>600?"600px":"auto");overflow:hidden;} ◎ max-width:600px; 在IE7.FF等其他非IE浏览器下最大宽度为600px.但在IE6中无效. ◎ width:600px; 在所有浏览器中图片的大小为600px
-
JS实现控制图片显示大小的方法【图片等比例缩放功能】
本文实例讲述了JS实现控制图片显示大小的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea
随机推荐
- 使用ajax技术无刷新动态调用股票信息
- JavaScript的继承实现小结
- 玩转图像函数库—常见图形操作
- 键盘 keycode的值 javascript时触发事件时很有用的要素
- 学习vue.js条件渲染
- ubuntu取消pppoe启动时自动拔号的设置方法
- 一天一个shell命令 linux好管家-进程-ps命令详解
- 使用zabbix监控mongodb的方法
- 设置Android系统永不锁屏永不休眠的方法
- Android中使用listview实现qq/微信好友列表
- 详解Java消息队列-Spring整合ActiveMq
- vue自定义指令directive实例详解
- Perl6中的垃圾收集
- Swift如何调用Objective-C的可变参数函数详解
- Java如何优雅地关闭资源try-with-resource及其异常抑制
- PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
- php常用的工具开发整理
- 一个简单JDK版动态代理
- spring设置拦截器代码实例
- pyhanlp安装介绍和简单应用