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=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"x"+image.height;
}
else{
if(image.height>400){
ImgD.height=400;
ImgD.width=(image.width*400)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"x"+image.height;
}
}
}
//-->
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
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
-
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
-
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 加载时自动调整图片大小
// 方法:setSelectReadOnly 用于设定极select控件ReadOnly, // 这个一个模拟只读不是真的只读 // 使用了onbeforeactivate,onfocus,onmouseover,onmouseout事件 // 示例:< img src='img.jpg' onload='ImgAutoSize(ImgD,FitWidth,FitHeight)' > ; // create by sl // ------------
-
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> 页面代码: 复制
-
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自动缩小超出大小的图片
复制代码 代码如下: <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
-
纯js实现div内图片自适应大小(已测试,兼容火狐)
这代码实现的功能就是平常我们遇到的一个div里面包含img的时候,在img图片大小未知,div大小未知的情况下,让图片自适应大小,对于图片本身小于div容器大小时,不作处理.因为如果拉伸,图片可能就失真了. 废话不多说,直接上代码,已测试,兼容火狐,谷歌,IE6,IE7/8 以下是js代码: 复制代码 代码如下: <script type="text/javascript" language="javascript"> window.onload=fun
-
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="
随机推荐
- Oracle数据库中ora-12899错误的解决方法
- Android MediaPlayer实现音乐播放器实例代码
- 记事本U盘病毒 Notepad.exe查杀方法
- python 正则表达式 反斜杠(/)的麻烦和陷阱
- php判断是否为json格式的方法
- 一个简单的php路由类
- Python 常用string函数详解
- Git里多种撤销操作的最佳方法
- jQuery处理图片加载失败的常用方法
- Eclipse启动Tomcat超时问题的解决方法
- js获取ip和地区
- 二级连动菜单
- JavaScript实现列出数组中最长的连续数
- 解决IIS中应用程序池提供服务的进程无法响应Ping或进程关闭时间超过了限制
- c++将数组名作为函数参数对数组元素进行相应的运算
- string中c_str(),data(),copy(p,n)函数的用法总结
- android Jsoup获取网站内容 android获取新闻标题实例
- 学习php设计模式 php实现策略模式(strategy)
- 解析file_get_contents模仿浏览器头(user_agent)获取数据
- Android自定义实现开关按钮代码
