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----文件操作
Jan 18 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
JS验证字符串功能
Feb 22 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
JS学习笔记之数组去重实现方法小结
May 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
php自动适应范围的分页代码
2008/08/05 PHP
php生成rss类用法实例
2015/04/14 PHP
php编程每天必学之表单验证
2016/03/01 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
Python中无限元素列表的实现方法
2014/08/18 Python
python协程用法实例分析
2015/06/04 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
python3调用R的示例代码
2018/02/23 Python
python中实现字符串翻转的方法
2018/07/11 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
Python简易版停车管理系统
2019/08/12 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
自动一体化专业求职信
2014/03/15 职场文书
离婚协议书范本
2015/01/26 职场文书
租赁协议书
2015/01/27 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP