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 面向对象之重载
May 04 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
基于javascript的无缝滚动动画1
Aug 07 Javascript
JavaScript原生数组函数实例汇总
Oct 14 Javascript
Vue 修改网站图标的方法
Dec 31 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
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Python实现简单的四则运算计算器
2016/11/02 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
python每天定时运行某程序代码
2019/08/16 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
介绍一下write命令
2014/08/10 面试题
求职简历自我评价范例
2014/03/12 职场文书
廉洁自律承诺书
2014/03/27 职场文书
重阳节标语大全
2014/10/07 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
以权谋私检举信范文
2015/03/02 职场文书
公司表扬稿范文
2015/05/05 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
导游词之桂林
2019/08/20 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python