JS获取图片实际宽高
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获取图片实际宽高的更多相关文章
- JS获取图片实际宽高及根据图片大小进行自适应
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ad ...
- Js获取图片原始宽高
如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...
- js判断图片加载完成后获取图片实际宽高
通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...
- 前端 JS 获取 Image 图像 宽高 尺寸
前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...
- js获取隐藏元素宽高的方法
网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...
- RT/Metro商店应用如何如何获取图片的宽高
RT/Metro商店应用如何如何获取图片的宽高 var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms ...
- 根据图片url地址获取图片的宽高
/** * 根据img获取图片的宽高 * @param img 图片地址 * @return 图片的对象,对象中图片的真实宽高 */ public BufferedImage getBufferedI ...
- JS获取元素的宽高以及offsetTop,offsetLeft等的属性值
基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...
- JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值
$(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj).wid ...
随机推荐
- HDU 1243 畅通project 并査集
Total Submission(s): 31033 Accepted Submission(s): 16313 Problem Description 某省调查城镇交通状况,得到现有城镇道路统 ...
- Front End Books
Front End Books 记录和推荐一些认为还不错的前端方面的书籍.列入标准: 看过,并觉得值得推荐给大家的. 正在看的,已经觉得不错的,或者听闻别人说不错的. 打算看的,经多人推荐,一致认为必 ...
- Post和Get差异
GET和POST差别例如以下: 1,生成方式 get方式有四种:1)直接在URL地址栏中输入URL.2)网页中的超链接.3)form中method为get. 4)form中method为空时.默认是g ...
- Hibernate实体映射配置(XML)简单三步完美配置
我们在使用Hibernate框架的时候,非常纠结的地方就是实体和表之间的映射,今天借助汤老师的思路写了小教程,以后配置不用纠结了! 第一步:写注释 格式为:?属性,表达的是本对象与?的?关系. 例:“ ...
- C#抓取AJAX页面的内容
原文 C#抓取AJAX页面的内容 现在的网页有相当一部分是采用了AJAX技术,所谓的AJAX技术简单一点讲就是事件驱动吧(当然这种说法可能很不全面),在你提交了URL后,服务器发给你的并不是所有是页面 ...
- SqlServer-COMPUTE BY
原文:SqlServer-COMPUTE BY COMPUTE BY子句可以通过同一个select语句即查看明细行,又查看汇总行.可以计算子组的汇总值,也可以计算整个结果集的汇总值 COMPUTE 子 ...
- 命令行配置源和安装本地rpm包
因为Firefox的在写博客时提交代码会丢失缩进,所以打算安装Chrome来写博,还不错,学到了两条命令- [shell] sudo yum-config-manager --add-repo=htt ...
- 使用Oracle 9i工具管理数据库 - 初学者系列 - 学习者系列文章
前面介绍了Oracle 9i的安装,本文大概介绍下Oracle 9i提供的管理工具的使用. 1 打开数据库配置工具 2 下一步 3 下一步 4 下一步.这里输入数据库名和SID 5 下一步 6 下一步 ...
- SQL Server 2005中设置Reporting Services发布web报表的匿名访问
原文:SQL Server 2005中设置Reporting Services发布web报表的匿名访问 一位朋友提出个问题:集成到SQL Server 2005中的Reporting Services ...
- postal邮件发送(一):基本配置
前言 源码:https://github.com/andrewdavey/postal 文档:http://aboutcode.net/postal/ postal最大好处就是再也不用拼接html发送 ...