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 相关文章推荐
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
javascript 实现 原路返回
Jan 21 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 Javascript
JS数组的常用方法整理
Mar 31 Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 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 MSSQL 存储过程的方法
2008/12/24 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
解javascript 混淆加密收藏
2009/01/16 Javascript
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
Python如何生成树形图案
2018/01/03 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
详解Python学习之安装pandas
2019/04/16 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
公司董事长岗位职责
2014/06/08 职场文书
保险公司演讲稿
2014/09/02 职场文书
庆祝儿童节标语
2014/10/09 职场文书
学习作风建设心得体会
2014/10/22 职场文书
工作检讨书范文
2015/01/23 职场文书
档案工作个人总结
2015/03/03 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers