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>

JS获取图片实际宽高的更多相关文章

  1. JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应  <img src="http://xxx.jpg" id="imgs" onload="ad ...

  2. Js获取图片原始宽高

    如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...

  3. js判断图片加载完成后获取图片实际宽高

    通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...

  4. 前端 JS 获取 Image 图像 宽高 尺寸

    前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...

  5. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  6. RT/Metro商店应用如何如何获取图片的宽高

    RT/Metro商店应用如何如何获取图片的宽高 var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms ...

  7. 根据图片url地址获取图片的宽高

    /** * 根据img获取图片的宽高 * @param img 图片地址 * @return 图片的对象,对象中图片的真实宽高 */ public BufferedImage getBufferedI ...

  8. JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...

  9. JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj).wid ...

随机推荐

  1. HDU 1243 畅通project 并査集

    Total Submission(s): 31033    Accepted Submission(s): 16313 Problem Description 某省调查城镇交通状况,得到现有城镇道路统 ...

  2. Front End Books

    Front End Books 记录和推荐一些认为还不错的前端方面的书籍.列入标准: 看过,并觉得值得推荐给大家的. 正在看的,已经觉得不错的,或者听闻别人说不错的. 打算看的,经多人推荐,一致认为必 ...

  3. Post和Get差异

    GET和POST差别例如以下: 1,生成方式 get方式有四种:1)直接在URL地址栏中输入URL.2)网页中的超链接.3)form中method为get. 4)form中method为空时.默认是g ...

  4. Hibernate实体映射配置(XML)简单三步完美配置

    我们在使用Hibernate框架的时候,非常纠结的地方就是实体和表之间的映射,今天借助汤老师的思路写了小教程,以后配置不用纠结了! 第一步:写注释 格式为:?属性,表达的是本对象与?的?关系. 例:“ ...

  5. C#抓取AJAX页面的内容

    原文 C#抓取AJAX页面的内容 现在的网页有相当一部分是采用了AJAX技术,所谓的AJAX技术简单一点讲就是事件驱动吧(当然这种说法可能很不全面),在你提交了URL后,服务器发给你的并不是所有是页面 ...

  6. SqlServer-COMPUTE BY

    原文:SqlServer-COMPUTE BY COMPUTE BY子句可以通过同一个select语句即查看明细行,又查看汇总行.可以计算子组的汇总值,也可以计算整个结果集的汇总值 COMPUTE 子 ...

  7. 命令行配置源和安装本地rpm包

    因为Firefox的在写博客时提交代码会丢失缩进,所以打算安装Chrome来写博,还不错,学到了两条命令- [shell] sudo yum-config-manager --add-repo=htt ...

  8. 使用Oracle 9i工具管理数据库 - 初学者系列 - 学习者系列文章

    前面介绍了Oracle 9i的安装,本文大概介绍下Oracle 9i提供的管理工具的使用. 1 打开数据库配置工具 2 下一步 3 下一步 4 下一步.这里输入数据库名和SID 5 下一步 6 下一步 ...

  9. SQL Server 2005中设置Reporting Services发布web报表的匿名访问

    原文:SQL Server 2005中设置Reporting Services发布web报表的匿名访问 一位朋友提出个问题:集成到SQL Server 2005中的Reporting Services ...

  10. postal邮件发送(一):基本配置

    前言 源码:https://github.com/andrewdavey/postal 文档:http://aboutcode.net/postal/ postal最大好处就是再也不用拼接html发送 ...