JS获取图片实际宽高及根据图片大小进行自适应


Posted in Javascript onAugust 11, 2013

JS获取图片实际宽高,以及根据图片大小进行自适应

<img src="http://xxx.jpg" id="imgs" onload="adapt();"/>

function adapt(){ 
var tableWidth = $("#imgTable").width(); //表格宽度 
var img = new Image(); 
img.src =$('#imgs').attr("src") ; 
var imgWidth = img.width; //图片实际宽度 
if(imgWidth<tableWidth){ 
$('#imgs').attr("style","width: auto"); 
}else{ 
$('#imgs').attr("style","width: 100%"); 
} 
}

另可设置CSS样式:
<style type="text/css"> 
<!-- 
img{ 
max-width:100%;height:auto; 
} 
--> 
</style>
Javascript 相关文章推荐
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
javascript动画算法实例分析
Jul 31 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 Javascript
Javascript使用integrity属性进行安全验证
Nov 07 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 #Javascript
js获取php变量的实现代码
Aug 10 #Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 #Javascript
jquery对象和DOM对象的区别介绍
Aug 09 #Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 #Javascript
javascript判断机器是否联网的2种方法
Aug 09 #Javascript
jquery 列表双向选择器之改进版
Aug 09 #Javascript
You might like
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
php适配器模式简单应用示例
2019/10/23 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
Javascript 类型转换方法
2010/10/24 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
python+opencv实现动态物体追踪
2018/01/09 Python
Django接收自定义http header过程详解
2019/08/23 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
有原因的手表:Flex Watches
2019/03/23 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
应用电子技术专业个人求职信
2013/09/21 职场文书
造型师求职自荐信
2013/09/27 职场文书
技术学校毕业生求职信分享
2013/12/02 职场文书
村委会主任先进事迹
2014/01/15 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
客户经理岗位职责
2015/01/31 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
Python超详细分步解析随机漫步
2022/03/17 Python