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正则表达式中参数g(全局)的作用
Nov 11 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
vue获取form表单的值示例
Oct 29 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
JavaScript实现随机点名小程序
Oct 29 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
javascript 计算两个整数的百分比值
2009/12/26 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
使用pandas read_table读取csv文件的方法
2018/07/04 Python
python中实现字符串翻转的方法
2018/07/11 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
python中count函数简单的实例讲解
2020/02/06 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
社区工作者思想汇报
2014/01/13 职场文书
银行员工辞职信范文
2014/01/20 职场文书
文秘人员工作职责
2014/01/31 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
校园运动会广播稿
2014/10/06 职场文书
博士给导师的自荐信
2015/03/06 职场文书
银行资信证明
2015/06/17 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书