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实现经典扫雷游戏
Apr 23 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
Jquery获取radio选中的值
May 05 jQuery
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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
XAMPP安装与使用方法详细解析
2013/11/27 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
php处理复杂xml数据示例
2016/07/11 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
Javascript Global对象
2009/08/13 Javascript
jquery 问答知识整理
2010/02/11 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
详解如何较好的使用js
2016/12/16 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
解决Python3下map函数的显示问题
2019/12/04 Python
tornado+celery的简单使用详解
2019/12/21 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
Python中的全局变量如何理解
2020/06/04 Python
python中元组的用法整理
2020/06/15 Python
pytorch中index_select()的用法详解
2021/01/06 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
法国房车租赁网站:Yescapa
2019/08/26 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
小学生期末自我鉴定
2014/01/19 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
主题团日活动总结
2014/06/25 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
学习nginx基础知识
2021/09/04 Servers
科普 | 业余无线电知识-波段篇
2022/02/18 无线电