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. Apache & WebDav 配置(一)

    (一)简单Apache服务器的搭建!用于文件de上传.下载.修改.删除! ---------- - Apache 1. 使用最广的 Web 服务器.支持各种脚本(PHP)的执行 2. Mac自带,只需 ...

  2. 吐槽一下项目中的代码坏味道:滥用java常量

    我们的项目中是否充斥着类似以下的代码呢?定义一个专门存放常量的java类(接口),非常多其它类依赖该常量类. public interface IConstant { int ZERO = 0; St ...

  3. 解决Win7下一个VC++6.0您不能直接打开多个project问题

    于Win7操作系统,只需双击打开多个VC ++6.0的project当文件,前方和后方的工作区将关闭工作区,这项.VC++6.0仅仅通过文件-->开放式工作区-->找到磁盘project档 ...

  4. 经验总结35--IP地址区域匹配

    想知道客服端訪问的IP地址是多少,并知道区域. 一般能够去http://www.ip138.com/,输入IP查询,但没提供比較好的接口,程序使用不方便. 另外有些企业提供一些离线的IP数据库,能够进 ...

  5. Java发送get及post请求工具方法

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...

  6. oracle 数据库技术支持生命周期表

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl4b3Jh/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...

  7. JUnit介绍

    8.1.1  JUnit简介 JUnit主要用来帮助开发人员进行Java的单元测试,其设计非常小巧,但功能却非常强 大. 下面是JUnit一些特性的总结: — 提供的API可以让开发人员写出测试结果明 ...

  8. navigator,JS检测浏览器插件

    最早由Netscape Navigator 2.0引入的navigator对象,现在已经成为识别客户端浏览器的事实标准.虽然其它浏览器也通过其它方式提供了相同或相似的信息(例如,IE中的window. ...

  9. 基于Asterisk的VoIP开发指南——(2)Asterisk AGI程序编写指南

    原文:基于Asterisk的VoIP开发指南--(2)Asterisk AGI程序编写指南 5. Asterisk AGI程序编写指南 5.1概述 很多时候,我们需要在拨号方案中做某些业务逻辑的判断或 ...

  10. INNO SETUP数据库的连接与创建

    原文:INNO SETUP数据库的连接与创建 说明一下:这块程序的前半部分在INNO SETUP的实例里面就有,而后面如果对数据库进行备份和还原在实例里面没有,在网上也不好找,是本人费了好大劲一句一句 ...