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 ...
随机推荐
- hibernate 一对多关联关系(具体分析)
在领域模型中, 类与类之间最普遍的关系就是关联关系. 在 UML 中, 关联是有方向的. 以 Customer 和 Order 为例: 一个用户能发出多个订单, 而一个订单仅仅能属于一个客户. 从 ...
- BS导出csv文件的通用方法(.net)
最近把以前项目里用的导出文件的功能提取成了dll,通过读取Attribute来得到要导出的表头(没有支持多语言),使用时只要组织好要导出的数据,调用方法就好了,希望对大家有用. 使用时只需引用下载包里 ...
- Objective-C的动态特性
最近几年中涌现了大量的Objective-C开发者.有些是从动态语言转过来的,比如Ruby或Python,有些是从强类型语言转过来的,如Java或C#,当然也有直接以Objective-C作为入门语言 ...
- SQL点滴6—“微软不认识闰年2月29日”&字符"N"的作用
原文:SQL点滴6-"微软不认识闰年2月29日"&字符"N"的作用 http://www.cnbeta.com/articles/50580.htm这个 ...
- 快速构建Windows 8风格应用30-应用生命周期管理
原文:快速构建Windows 8风格应用30-应用生命周期管理 引言 Windows 8 中可以启动多个应用并在其中切换,我们没有必要担心降低系统速度或消耗电池电量. 因为系统会自动挂起(有时会终止) ...
- C#JSON序列化与反序列化
原文:C#JSON序列化与反序列化 windows phone学习也有一段时间了,想要做一个新闻客户端练练手,于是就在网上找看有没有接口之类.在天狗播客找到了热点热词新闻资讯API开放接口,接口提供的 ...
- 项目笔记---CSharp图片处理
原文:项目笔记---CSharp图片处理 项目笔记---CSharp图片处理 最近由于项目上需要对图片进行二值化处理,就学习了相关的图片处理上的知识,从开始的二值化的意义到动态阀值检测二值化等等,并用 ...
- 在标记的HREF属性中javascript:alert(this.innerHTML)会怎么样?
原文:在标记的HREF属性中javascript:alert(this.innerHTML)会怎么样? <a href="javascript:alert(this.innerHTML ...
- C++中出现的计算机术语4
adaptor(适配器) 一种标准库类型.函数或迭代器,使某种标准库类型.函数或迭代器的行为类似于第二种标准库类型.函数或迭代器.系统提供了三种顺序容器适配器:stack(栈).queue(队列)以及 ...
- 苹果公司的新的编程语言 Swift 高级语言(十五)--协议
协议定义了适合某个特定任务或功能须要的方法.属性和其他需求的一个蓝图.协议本身不提供这些需求的实现,它仅仅是描写叙述了一个任务或功能实现的蓝图. 协议与java 语言中的接口定义类似,都是描写叙述了一 ...