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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
javascript调试说明
Jun 07 Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 Javascript
JS实现炫酷雪花飘落效果
Aug 19 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
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
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
Vue异步加载about组件
2017/10/31 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
python opencv摄像头的简单应用
2019/06/06 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
python3下pygame如何实现显示中文
2020/01/11 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
幼儿园毕业教师感言
2014/02/21 职场文书
幼教求职信
2014/03/12 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
公司人事管理制度
2015/08/05 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python