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需刷新才能执行]
相关推荐
-
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> 页面代码: 复制
-
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自动缩小超出大小的图片
复制代码 代码如下: <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
-
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实现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="
-
js 加载时自动调整图片大小
// 方法:setSelectReadOnly 用于设定极select控件ReadOnly, // 这个一个模拟只读不是真的只读 // 使用了onbeforeactivate,onfocus,onmouseover,onmouseout事件 // 示例:< img src='img.jpg' onload='ImgAutoSize(ImgD,FitWidth,FitHeight)' > ; // create by sl // ------------
-
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获取图片大小的函数代码
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实现控制图片显示大小的方法【图片等比例缩放功能】
本文实例讲述了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
随机推荐
- JavaScript自学笔记(必看篇)
- 详解JSP中使用过滤器进行内容编码的解决办法
- python 循环while和for in简单实例
- Windows Server 2016 IIS10 安装配置图文详解
- Java多线程编程之ThreadLocal线程范围内的共享变量
- ASP.NET2.0服务器控件之类型转换器
- asp.net中Request.QueryString与Request.Param的区别分析
- php中call_user_func函数使用注意事项
- Yii把CGridView文本框换成下拉框的方法
- Python文件和目录操作详解
- Python 3.x 连接数据库示例(pymysql 方式)
- Android绘制炫酷的引导界面
- MySQL关闭过程详解和安全关闭MySQL的方法
- Windows系统中安装nodejs图文教程
- AJax 学习笔记二(onreadystatechange的作用)
- Ajax 实现加载进度条
- 获取3个数组不重复的值的具体实现
- AIX系统中删除指定目录、指定后缀、指定天数以前的历史文件
- encrypt.vbs 内容加密vbs实现代码
- php5.5新数组函数array_column使用
