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 ...
随机推荐
- 为WebBrowser的WEB页的Document注册事件的问题
原文:为WebBrowser的WEB页的Document注册事件的问题 当使用WebBrowser,并对其装载的Web页建立Document的事件后,WebBrowser里的页面元素都变得难于操作了, ...
- Yii Framework2.0开发教程(4)在yii中定义全局变量
在yii中定义全局变量最好的地方是入口脚本处.也就是web目录中的index.php文件 比如我们在defined('YII_ENV') or define('YII_ENV', 'dev');后写上 ...
- 多线程之线程池Executor应用
JDK1.5之后,提供了自带的线程池,以便我们更好的处理线程并发问题. Executor类给我提供了多个线程池创建的方式: 创建固定的线程池 Executors.newFixedThreadPool( ...
- Linux下防火墙设置
Linux下开启/关闭防火墙命令 1) 永久性生效,重启后不会复原 开启:chkconfigiptables on 关闭:chkconfigiptables off 2) 即时生效,重启后复原 开启 ...
- 在openwrt上编译最简单的一个ipk包文件
1 什么是opkg Opkg 是一个轻量快速的套件管理系统,目前已成为 Opensource 界嵌入式系统标准.常用于路由.交换机等嵌入式设备中,用来管理软件包的安装升级与下载. opkg updat ...
- JSON数据转换方法 parse()和stringify()
将对象转换成JSON格式的文本数据 var str = JSON.stringify(data); 将对象转换成JSON对象的方法 var data = JSON.parse(str);
- JQuery Smart UI
JQuery Smart UI 个人开发的一套使用htm+js的开发框架 SmartUI2.0后续声明 摘要: 感谢很多朋友关注,因为今年一直在另外一个公司做顾问,网络环境管制相当严格,所以一直没有更 ...
- Android有关Volley使用(十)至Request和Reponse意识
我们知道,.网络Http沟通,会有一个Request,相同,也将有Response.我们Volley在使用RequestQueue来之前加入的请求.我们将创建一个Request对象,例StringRe ...
- asp.net页面生命周期回顾
---根据一讲师所讲做了一下笔记,仅供参考 会存在些错误 页面声明周期: 1.HttpApplication在第11和第12个事件之间开始了页面声明周期,调用了第8个事件创建实例的pr(Process ...
- WCF、Web API、WCF REST、Web Service 区别
Web Service It is based on SOAP and return data in XML form. It support only HTTP protocol. It is no ...